API 构建配置
Nuxt.js 允许你根据服务端需求, webpack 的构建配置。
analyze
Nuxt.js 使用 分析并可视化构建后的打包,你可以基于分析结果来决定如何优化它。
类型: Boolean 或 Object
认值: false
如果是 Object 类型, 可以移步 查看可用的。
例如 (nuxt.con.js):
module.exports = { build: { analyze: true // or analyze: { analyzerMode: 'static' } } }
: 可通过 nuxt build --analyze 或 nuxt build -a 命令来启用该分析器进行编译构建,分析结果可在 http://localhost:8888 上查看。
babel
为 JS 和 Vue 设定的 babel 配置。
类型: Object
认:
{ babelrc: false, cacheDirectory: undefined, presets: ['@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
类型: Boolean
认: false
?? 实验性的
启用缓存 和
crossorigin
类型: String
认: undefined
在的HTML中的 <link rel="stylesheet"> 和 <script> 上配置 crossorigin 。 请查看 了解更多可用选项。
cssSourceMap
类型: boolean
认: true 为开发模式(development), false 为生产模式(production)。
开启 CSS Source Map
devMiddleware
类型: Object
请查看 了解更多可用选项。
devtools
类型: boolean
认: false
配置是否允许 调试。
如果您已经通过 nuxt.con.js 或其他方式激活,则无论标志为 true 或 false,devtools都会启用。
extend
类型: Function
为客户端和服务端的构建配置进行手工的扩展处理。
该扩展会被两次,一次在服务端打包构建的时候,另外一次是在客户端打包构建的时候。该的参数如下:
Webpack 配置对象
构建环境对象,这些(全部为布尔类型):isDev,isClient,isServer
警告: 提供的isClient和isServer键与context中可用的键分开, 它们是长期的。这里不要使用process.client和process.server,因为它们是'undefined'。
例如 (nuxt.con.js):
module.exports = { build: { extend (con, { isClient }) { // 为 客户端打包 进行扩展配置 if (isClient) { con.devtool = 'eval-source-map' } } } }
如果你想了解更多关于webpack的配置,可以移步 Nuxt.js 源码的 。
loaders具有与之相同的对象结构 build.loaders, 所以你可以在extend中更改loaders的选项。
例如 (nuxt.con.js):
export default { build: { extend (con, { isClient, loaders: { vue } }) { // 仅扩展客户端中的webpack配置 if (isClient) { vue.transformAssetUrls.video = ['src', 'poster'] } } } }
extractCSS
使用Vue 服务器端渲染启用常见CSS。
类型: Boolean
认: false
使用将主块中的 CSS 到单独的 CSS 中(注入模板),该允许单独缓存。当有很多共用 CSS 时建议使用此,异步组件中的 CSS 将保持内联为JavaScript字符串并由vue-style-loader处理。
filenames
类型: Object
打包名
认值:
{ 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.con.js):
export default { build: { filenames: { chunk: ({ isDev }) => isDev ? '[name].js' : '[id].[contenthash].js' } } }
要更多了解使用,可以移步
friendlyErrors
类型: Boolean
认: true (启用叠加)
hardSource
类型: Boolean
认: false
?? 实验性的
开启
hotMiddleware
类型: Object
请查看 了解更多可用选项。
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配置的(将应用于所有模式)。
loaders
类型: Object
webpack 加载器
认:
{ file: {}, fontUrl: { limit: 1000 }, l: { limit: 1000 }, pugPlain: {}, vue: { transformAssetUrls: { video: 'src', source: 'src', object: 'src', embed: 'src' } }, css: {}, cssModules: { localIdentName: '[local]_[hash:base64:5]' }, less: {}, sass: { indented: true }, scss: {}, stylus: {}, vueStyle: {} }
注意:除了在nuxt.con.js中指定配置外,它还可以通过build.extend。
更多详情查看 .
更多详情查看 .
更多详情查看 或 .
更多详情查看 .
更多详情查看 . 注意:cssModules是使用的loader选项
您可以通过loaders.less将任何Less特定选项传递给less-loader。 请查看 来更多配置信息。
查看 来更多配置信息。 Note: loaders.sass is for
注意:loaders.sass用于
更多配置信息查看 。
optimization
类型: Object
认:
{ minimize: true, minimizer: [ // terser-webpack-plugin // optimize-assets-webpack-plugin ], splitChunks: { chunks: 'all', automaticNameDelimiter: '.', name: undefined, cacheGroups: {} } }
在开发或分析模式下,splitChunks.name的认值为true。 You can set minimizer to a customized Array of plugins or set minimize to false to disable all minimizers. 您可以将minimizer设置为,或将minim设置为false以禁用所有minimize。(认在开发环境情况下,minimize被禁用)。
查看 来了解更多配置信息。
terser
类型: Object 或 Boolean
认:
{ parallel: true, cache: false, sourceMap: false, extractComments: { filename: 'LICENSES' }, terserOptions: { output: { comments: /^\**!|@preserve|@license|@cc_on/ } } }
设置为false可以禁用此。
当webpack中 con.devtool 与source-?map匹配时,将启用sourceMap
查看 来了解更多配置信息。
optimizeCSS
类型: Object 或 Boolean
认:
false
{} when extractCSS is enabled
OptimizeCSSAssets 配置查看.
类型: Boolean
认: false
在webpack构建打包中开启 。
plugins
类型: Array
认值: []
配置 Webpack
例如 (nuxt.con.js):
import webpack from 'webpack' import { version } from './package.json' export default { build: { plugins: [ new webpack.DefinePlugin({ 'process.VERSION': version }) ] } }
postcss
类型: Array, Object(推荐), Function 或 Boolean
注意:Nuxt.js已应用。认情况下,它将启用Stage 2和Autoprefixer,你可以使用build.postcss.preset来配置它。
配置
认值:
{ plugins: { 'postimport': {}, 'posturl': {}, 'postpreset-env': {}, 'cssnano': { preset: 'default' } // disabled in dev mode } }
例如 (nuxt.con.js):
export default { build: { postcss: { plugins: { // Disable `posturl` 'posturl': false, // Add some plugins 'postnested': {}, 'postresponsive-type': {}, 'posthexrgba': {} }, preset: { autoprefixer: { grid: true } } } } }
profile
类型: Boolean
认: 开启只需在命令行中加入: --profile
开启 profiler 请查看
publicPath
Nuxt.js允许您将dist到CDN来获得最快渲染,只需将publicPath设置为CDN即可。
类型: String
认: '/_nuxt/'
例如 (nuxt.con.js):
export default { build: { publicPath: 'https://cdn.nuxtjs.org' } }
然后,当启动nuxt build时, 将.nuxt/dist/client目录的到您的CDN即可!
控制部分构建信息日志
类型: Boolean
认: 检测到CI或test环境时启用
splitChunks
类型: Object
认:
{ layouts: false, pages: true, commons: true }
如果分模块用于 layout, pages 和 commons (常用: vue|vue-loader|vue-router|vuex...).
ssr
为服务器端渲染创建特殊的webpack包。
类型: Boolean
认: true 为通用模式,false 为spa模式
如果未提供,则根据认模式设置此选项。
styleResources
类型: Object
认: {}
当您需要在中注入一些变量和mixin而不必每次都导入它们时,这非常有用。
Nuxt.js 使用 来实现这种行为。
您需要为css预处理器指定要包含的 模式 / 路径 : less, sass, scss 或 stylus
您不能在此处使用路径别名(~ 和 @),
:warning: You cannot use path aliases here (~ and @),你需要使用相对或。
安装 style-resources:
$ yarn add @nuxtjs/style-resources
根据需要安装:
SASS: $ yarn add node-sass
LESS: $ yarn add less-loader less
Stylus: $ yarn add stylus-loader stylus
nuxt.con.js:
export default { modules: [ '@nuxtjs/style-resources' ], styleResources: { scss: './assets/variables.scss', less: './assets/**/*.less' // sass: ... } }
然后就可以随处直接使用定义过的变量或。
templates
Nuxt.js允许您自己的模板,这些模板将基于Nuxt配置进行渲染。 此特别适用于使用 modules。
类型: Array
Example (nuxt.con.js):
export default { build: { templates: [ { src: '~/modules/support/plugin.js', // `src` 可以是绝对的或相对的路径 dst: 'support.js', // `dst` 是相对于项目`.nuxt`目录 options: { // 选项`options`选项可以将参数提供给模板 live_chat: false } } ] } }
使用呈现模板,您可以了解有关使用它们的更多信息。
transpile
类型: Array<string | RegExp>
认: []
如果要使用Babel与特定的依赖关系进行转换,你可以在build.transpile中它们,transpile中的选项可以是字符串或正则表达式对象,用于匹配依赖项名。
vueLoader
注意:此配置在Nuxt 2.0+中已被,请使用 build.loaders.vue 来替代
类型: Object
认:
{ productionMode: !this.options.dev, transformAssetUrls: { video: 'src', source: 'src', object: 'src', embed: 'src' } }
指定 .
vendor
注意:在Nuxt.js 2.0+版本中,vendor由于Webpack 4,将废弃该API但保留使用作为兼容低版本处理。查看:
Nuxt.js 允许你在的 vendor.bundle.js 中一些模块,以减少应用 bundle 的体积。这里说的是一些你所依赖的第三方模块 (比如 axios)
类型: Array
数组元素类型: String
想要把模块打包进 vendor bundle,你可以在 nuxt.con.js 的 build.vendor 字段中配置:
module.exports = { build: { vendor: ['axios'] } }
你也可以路径,比如一些自己写的库:
module.exports = { build: { vendor: [ 'axios', '~plugins/my-lib.js' ] } }
watch
您可以使用watch来监听更改。此特别适用用在modules中。
类型: Array<String>
export default { build: { watch: [ '~/.nuxt/support.js' ] } }
followSymlinks
认情况下,过程不会扫描符号内的。此布尔值它们,因此允许在夹(例如“pages”夹)中使用符号。
类型: Boolean
export default { build: { followSymlinks: false } }