API 构建配置浅谈

发布时间：2023-04-14 13:16:49 所属栏目：教程来源：

导读：Nuxt.js 允许你根据服务端需求，自定义 webpack 的构建配置。

Nuxt.js 使用 webpack-bundle-analyzer 分析并可视化构建后的打包文件，你可以基于分析结果来决定如何优化它。

如果是 Object 类型，可以移步这

Nuxt.js 允许你根据服务端需求，自定义 webpack 的构建配置。

Nuxt.js 使用 webpack-bundle-analyzer 分析并可视化构建后的打包文件，你可以基于分析结果来决定如何优化它。

如果是 Object 类型，可以移步这里查看可用的属性。

例如 (nuxt.config.js):

module.exports = {
build: {
analyze: true
// or
analyze: {
analyzerMode: 'static'
}
}
}
提示：可通过 nuxt build --analyze 或 nuxt build -a 命令来启用该分析器进行编译构建。

默认:

{
babelrc: false,
cacheDirectory: undefined,
presets: ['@nuxt/babel-preset-app']
}
默认为 @nuxt/babel-preset-app 在client构建中是ie：'9'，在server构建中是node:'current'。

注意: build.babel.presets 中配置的预设将应用于客户端和服务器构建。目标将由Nuxt相应地设置（客户端/服务器）。如果要为客户端或服务器版本配置不同的预设，请使用presets作为函数：

export default {
build: {
babel: {
presets ({ isServer }) {
const targets = isServer ? { node: '10' } : { ie: '11' }
return [
[ require.resolve('@nuxt/babel-preset-app'), { targets } ]
]
}
}
}
}
我们强烈建议使用默认预设。但是,如果必须，您可以更改预设。

Example for custom presets:

export default {
build: {
babel: {
presets: ['es2015', 'stage-0']
}
}
}
cache

在生成的HTML中的 <link rel="stylesheet"> 和 <script> 标记上配置 crossorigin 属性。请查看 CORS settings attributes 了解更多可用选项。

cssSourceMap
类型: boolean

默认: true 为开发模式(development)， false 为生产模式(production)。

开启 CSS Source Map 支持

devMiddleware
类型: Object

请查看 webpack-dev-middleware 了解更多可用选项。

devtools
类型: boolean

默认: false

配置是否允许 vue-devtools 调试。

如果您已经通过 nuxt.config.js 或其他方式激活，则无论标志为 true 或 false，devtools都会启用。

extend
类型： Function

为客户端和服务端的构建配置进行手工的扩展处理。

该扩展方法会被调用两次，一次在服务端打包构建的时候，另外一次是在客户端打包构建的时候。该方法的参数如下：

Webpack 配置对象

构建环境对象，包括这些属性(全部为布尔类型):isDev，isClient，isServer

警告: 提供的isClient和isServer键与context中可用的键分开，它们是长期支持的。这里不要使用process.client和process.server，因为它们是'undefined'。

例如 (nuxt.config.js)：

module.exports = {
build: {
extend (config, { isClient }) {
// 为客户端打包进行扩展配置
if (isClient) {
config.devtool = 'eval-source-map'
}
}
}
}
如果你想了解更多关于webpack的配置，可以移步 Nuxt.js 源码的 webpack 目录。

loaders in extend
loaders具有与之相同的对象结构 build.loaders, 所以你可以在extend中更改loaders的选项。

例如 (nuxt.config.js):

export default {
build: {
extend (config, { isClient, loaders: { vue } }) {
// 仅扩展客户端中的webpack配置
if (isClient) {
vue.transformAssetUrls.video = ['src', 'poster']
}
}
}
}
extractCSS
使用Vue 服务器端渲染指南启用常见CSS提取。

使用extract-css-chunks-webpack-plugin将主块中的 CSS 提取到一个单独的 CSS 文件中（自动注入模板），该文件允许单独缓存文件。当有很多共用 CSS 时建议使用此方法，异步组件中的 CSS 将保持内联为JavaScript字符串并由vue-style-loader处理。

默认值：

{
app: ({ isDev }) => isDev ? '[name].js' : '[contenthash].js',
chunk: ({ isDev }) => isDev ? '[name].js' : '[contenthash].js',
css: ({ isDev }) => isDev ? '[name].css' : '[contenthash].css',
img: ({ isDev }) => isDev ? '[path][name].[ext]' : 'img/[contenthash:7].[ext]',
font: ({ isDev }) => isDev ? '[path][name].[ext]' : 'fonts/[contenthash:7].[ext]',
video: ({ isDev }) => isDev ? '[path][name].[ext]' : 'videos/[contenthash:7].[ext]'
}
此示例将 chunk 名称更改为数字id (nuxt.config.js):

export default {
build: {
filenames: {
chunk: ({ isDev }) => isDev ? '[name].js' : '[id].[contenthash].js'
}
}
}
要更多了解使用，可以移步webpack documentation

html.minify
类型: Object

默认:

{
collapseBooleanAttributes: true,
collapseWhitespace: false,
decodeEntities: true,
minifyCSS: true,
minifyJS: true,
processConditionalComments: true,
removeAttributeQuotes: false,
removeComments: false,
removeEmptyAttributes: true,
removeOptionalTags: false,
removeRedundantAttributes: true,
removeScriptTypeAttributes: false,
removeStyleLinkTypeAttributes: false,
removeTagWhitespace: false,
sortClassName: false,
trimCustomFragments: true,
useShortDoctype: true
}
用于压缩在构建打包过程中创建的HTML文件配置html-minifier的插件（将应用于所有模式）。

默认:

{
file: {},
fontUrl: { limit: 1000 },
imgurl: { limit: 1000 },
pugPlain: {},
vue: {
transformAssetUrls: {
video: 'src',
source: 'src',
object: 'src',
embed: 'src'
}
},
css: {},
cssModules: {
localIdentName: '[local]_[hash:base64:5]'
},
less: {},
sass: {
indentedSyntax: true
},
scss: {},
stylus: {},
vueStyle: {}
}
注意：除了在nuxt.config.js中指定配置外，它还可以通过build.extend修改。

（编辑：汽车网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!