API 构建配置
Nuxt.js 允许你根据服务端需求,自定义 webpack 的构建配置。
analyze
Nuxt.js 使用 webpack-bundle-analyzer 分析并可视化构建后的打包文件,你可以基于分析结果来决定如何优化它。
类型: Boolean 或 Object
默认值: false
如果是 Object 类型, 可以移步 这里 查看可用的属性。
例如 (nuxt.config.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'] }
默认为 @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 属性。 请查看 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提取。
类型: Boolean
默认: false
使用extract-css-chunks-webpack-plugin将主块中的 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.config.js):
export default { build: { filenames: { chunk: ({ isDev }) => isDev ? '[name].js' : '[id].[contenthash].js' } } }
要更多了解使用,可以移步webpack documentation
friendlyErrors
类型: Boolean
默认: true (启用叠加)
hardSource
类型: Boolean
默认: false
⚠️ 实验性的
hotMiddleware
类型: Object
请查看 webpack-hot-middleware 了解更多可用选项。
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的插件(将应用于所有模式)。
loaders
类型: Object
自定义 webpack 加载器
默认:
{ 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修改。
loaders.file
更多详情查看 file-loader 配置.
loaders.fontUrl and loaders.imgUrl
更多详情查看 url-loader 配置.
loaders.pugPlain
更多详情查看 pug-plain-loader 或 Pug compiler 配置.
loaders.vue
更多详情查看 vue-loader 配置.
loaders.css and loaders.cssModules
更多详情查看 css-loader 配置. 注意:cssModules是使用的loader选项 CSS Modules
loaders.less
您可以通过loaders.less将任何Less特定选项传递给less-loader。 请查看 Less 文档 来获取更多配置信息。
loaders.sass and loaders.scss
查看 Node Sass 文档 来获取更多配置信息。 Note: loaders.sass is for Sass Indented Syntax
注意:loaders.sass用于Sass 缩进
loaders.vueStyle
更多配置信息查看 vue-style-loader 配置。
optimization
类型: Object
默认:
{ minimize: true, minimizer: [ // terser-webpack-plugin // optimize-css-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被禁用)。
查看 Webpack Optimization来了解更多配置信息。
terser
类型: Object 或 Boolean
默认:
{ parallel: true, cache: false, sourceMap: false, extractComments: { filename: 'LICENSES' }, terserOptions: { output: { comments: /^\**!|@preserve|@license|@cc_on/ } } }
设置为false可以禁用此插件。
当webpack中 config.devtool 与source-?map匹配时,将启用sourceMap
查看 webpack-contrib/terser-webpack-plugin来了解更多配置信息。
optimizeCSS
类型: Object 或 Boolean
默认:
false
{} when extractCSS is enabled
OptimizeCSSAssets 插件配置查看NMFR/optimize-css-assets-webpack-plugin.
parallel
类型: Boolean
默认: false
在webpack构建打包中开启 thread-loader。
plugins
类型: Array
默认值: []
配置 Webpack 插件
例如 (nuxt.config.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已应用PostCSS Preset Env。默认情况下,它将启用Stage 2功能和Autoprefixer,你可以使用build.postcss.preset来配置它。
自定义 postcss 配置
默认值:
{ plugins: { 'postcss-import': {}, 'postcss-url': {}, 'postcss-preset-env': {}, 'cssnano': { preset: 'default' } // disabled in dev mode } }
例如 (nuxt.config.js):
export default { build: { postcss: { plugins: { // Disable `postcss-url` 'postcss-url': false, // Add some plugins 'postcss-nested': {}, 'postcss-responsive-type': {}, 'postcss-hexrgba': {} }, preset: { autoprefixer: { grid: true } } } } }
profile
类型: Boolean
默认: 开启只需在命令行中加入: --profile
开启 profiler 请查看 WebpackBar
publicPath
Nuxt.js允许您将dist文件上传到CDN来获得最快渲染性能,只需将publicPath设置为CDN即可。
类型: String
默认: '/_nuxt/'
例如 (nuxt.config.js):
export default { build: { publicPath: 'https://cdn.nuxtjs.org' } }
然后,当启动nuxt build时, 将.nuxt/dist/client目录的内容上传到您的CDN即可!
quiet
控制部分构建信息输出日志
类型: Boolean
默认: 检测到CI或test环境时启用 std-env
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 使用 https://github.com/nuxt-community/style-resources-module 来实现这种行为。
您需要为css预处理器指定要包含的 模式 / 路径 : less, sass, scss 或 stylus
您不能在此处使用路径别名(~ 和 @),
:warning: You cannot use path aliases here (~ and @),你需要使用相对或绝对路径。
安装 style-resources:
$ yarn add @nuxtjs/style-resources
根据需要安装:
SASS: $ yarn add sass-loader node-sass
LESS: $ yarn add less-loader less
Stylus: $ yarn add stylus-loader stylus
修改 nuxt.config.js:
export default { modules: [ '@nuxtjs/style-resources' ], styleResources: { scss: './assets/variables.scss', less: './assets/**/*.less' // sass: ... } }
然后就可以随处直接使用定义过的变量或函数。
templates
Nuxt.js允许您自定义自己的模板,这些模板将基于Nuxt配置进行渲染。 此功能特别适用于使用 modules。
类型: Array
Example (nuxt.config.js):
export default { build: { templates: [ { src: '~/modules/support/plugin.js', // `src` 可以是绝对的或相对的路径 dst: 'support.js', // `dst` 是相对于项目`.nuxt`目录 options: { // 选项`options`选项可以将参数提供给模板 live_chat: false } } ] } }
使用lodash.template呈现模板,您可以了解有关使用它们的更多信息here。
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' } }
指定 Vue Loader 配置.
vendor
注意:在Nuxt.js 2.0+版本中,vendor由于Webpack 4,将废弃该API但保留使用方法作为兼容低版本处理。查看:Nuxt.js 2.0 更新文档
Nuxt.js 允许你在自动生成的 vendor.bundle.js 文件中添加一些模块,以减少应用 bundle 的体积。这里说的是一些你所依赖的第三方模块 (比如 axios)
类型: Array
数组元素类型: String
想要把模块打包进 vendor bundle,你可以在 nuxt.config.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 } }