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
}
}