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
}
}
602392714
清零编程群