Nuxt.js 構(gòu)建配置

構(gòu)建配置

Nuxt.js 允許你根據(jù)服務(wù)端需求，自定義 webpack 的構(gòu)建配置。

analyze

Nuxt.js 使用 webpack-bundle-analyzer 分析并可視化構(gòu)建后的打包文件，你可以基于分析結(jié)果來(lái)決定如何優(yōu)化它。

• 類(lèi)型： Boolean 或 Object
• 默認(rèn)值： false

如果是 Object 類(lèi)型， 可以移步 這里 查看可用的屬性。

例如 (nuxt.config.js):

module.exports = {
  build: {
    analyze: true
    // or
    analyze: {
      analyzerMode: 'static'
    }
  }
}

提示： 可通過(guò) nuxt build --analyze 或 nuxt build -a 命令來(lái)啟用該分析器進(jìn)行編譯構(gòu)建，分析結(jié)果可在 http://localhost:8888 上查看。

babel

為 JS 和 Vue 文件設(shè)定自定義的 babel 配置。

• 類(lèi)型: Object
• 默認(rèn):

{
  babelrc: false,
  cacheDirectory: undefined,
  presets: ['@nuxt/babel-preset-app']
}

默認(rèn)為 @nuxt/babel-preset-app 在client構(gòu)建中是ie：'9'，在server構(gòu)建中是node:'current'。

注意: build.babel.presets 中配置的預(yù)設(shè)將應(yīng)用于客戶(hù)端和服務(wù)器構(gòu)建。目標(biāo)將由Nuxt相應(yīng)地設(shè)置（客戶(hù)端/服務(wù)器）。如果要為客戶(hù)端或服務(wù)器版本配置不同的預(yù)設(shè)，請(qǐng)使用presets作為函數(shù)：

export default {
  build: {
    babel: {
      presets ({ isServer }) {
        const targets = isServer ? { node: '10' } : { ie: '11' }
        return [
          [ require.resolve('@nuxt/babel-preset-app'), { targets } ]
        ]
      }
    }
  }
}

我們強(qiáng)烈建議使用默認(rèn)預(yù)設(shè)。但是,如果必須，您可以更改預(yù)設(shè)。

Example for custom presets:

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

cache

• 類(lèi)型: Boolean
• 默認(rèn): false
• ?? 實(shí)驗(yàn)性的

啟用緩存 terser-webpack-plugin 和 cache-loader

crossorigin

• 類(lèi)型: String
• 默認(rèn): undefined

在生成的HTML中的 <link rel="stylesheet"> 和 <script> 標(biāo)記上配置 crossorigin 屬性。 請(qǐng)查看 CORS settings attributes 了解更多可用選項(xiàng)。

cssSourceMap

• 類(lèi)型: boolean
• 默認(rèn): true 為開(kāi)發(fā)模式(development)， false 為生產(chǎn)模式(production)。

開(kāi)啟 CSS Source Map 支持

devMiddleware

• 類(lèi)型: Object

請(qǐng)查看 webpack-dev-middleware 了解更多可用選項(xiàng)。

devtools

• 類(lèi)型: boolean
• 默認(rèn): false

配置是否允許 vue-devtools 調(diào)試。

如果您已經(jīng)通過(guò) nuxt.config.js 或其他方式激活，則無(wú)論標(biāo)志為 true 或 false，devtools都會(huì)啟用。

extend

• 類(lèi)型： Function

為客戶(hù)端和服務(wù)端的構(gòu)建配置進(jìn)行手工的擴(kuò)展處理。

該擴(kuò)展方法會(huì)被調(diào)用兩次，一次在服務(wù)端打包構(gòu)建的時(shí)候，另外一次是在客戶(hù)端打包構(gòu)建的時(shí)候。該方法的參數(shù)如下：

1. Webpack 配置對(duì)象
2. 構(gòu)建環(huán)境對(duì)象，包括這些屬性(全部為布爾類(lèi)型):isDev，isClient，isServer

警告: 提供的isClient和isServer鍵與context中可用的鍵分開(kāi)， 它們是長(zhǎng)期支持的。這里不要使用process.client和process.server，因?yàn)樗鼈兪?undefined'。

例如 (nuxt.config.js)：

module.exports = {
  build: {
    extend (config, { isClient }) {
      // 為 客戶(hù)端打包 進(jìn)行擴(kuò)展配置
      if (isClient) {
        config.devtool = 'eval-source-map'
      }
    }
  }
}

如果你想了解更多關(guān)于webpack的配置，可以移步 Nuxt.js 源碼的 webpack 目錄。

loaders in extend

loaders具有與之相同的對(duì)象結(jié)構(gòu) build.loaders, 所以你可以在extend中更改loaders的選項(xiàng)。

例如 (nuxt.config.js):

export default {
  build: {
    extend (config, { isClient, loaders: { vue } }) {
      // 僅擴(kuò)展客戶(hù)端中的webpack配置
      if (isClient) {
        vue.transformAssetUrls.video = ['src', 'poster']
      }
    }
  }
}

extractCSS

使用Vue 服務(wù)器端渲染指南啟用常見(jiàn)CSS提取。

• 類(lèi)型: Boolean
• 默認(rèn): false

使用extract-css-chunks-webpack-plugin將主塊中的 CSS 提取到一個(gè)單獨(dú)的 CSS 文件中（自動(dòng)注入模板），該文件允許單獨(dú)緩存文件。當(dāng)有很多共用 CSS 時(shí)建議使用此方法，異步組件中的 CSS 將保持內(nèi)聯(lián)為JavaScript字符串并由vue-style-loader處理。

filenames

• 類(lèi)型： Object

自定義打包文件名

• 默認(rèn)值：{ 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 名稱(chēng)更改為數(shù)字id (nuxt.config.js):

export default {
  build: {
    filenames: {
      chunk: ({ isDev }) => isDev ? '[name].js' : '[id].[contenthash].js'
    }
  }
}

要更多了解使用，可以移步webpack documentation

friendlyErrors

• 類(lèi)型: Boolean
• 默認(rèn): true (啟用疊加)

友好的錯(cuò)誤 Webpack 插件

hardSource

• 類(lèi)型: Boolean
• 默認(rèn): false
• ?? 實(shí)驗(yàn)性的

開(kāi)啟 HardSourceWebpackPlugin

hotMiddleware

• 類(lèi)型: Object

請(qǐng)查看 webpack-hot-middleware 了解更多可用選項(xiàng)。

html.minify

• 類(lèi)型: Object
• 默認(rèn):

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

用于壓縮在構(gòu)建打包過(guò)程中創(chuàng)建的HTML文件配置html-minifier的插件（將應(yīng)用于所有模式）。

loaders

• 類(lèi)型： Object

自定義 webpack 加載器

• Default:

{
  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中指定配置外，它還可以通過(guò)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選項(xiàng) CSS Modules

loaders.less

您可以通過(guò)loaders.less將任何Less特定選項(xiàng)傳遞給less-loader。 請(qǐng)查看 Less 文檔 來(lái)獲取更多配置信息。

loaders.sass and loaders.scss

查看 Node Sass 文檔 來(lái)獲取更多配置信息。 Note: loaders.sass is for Sass Indented Syntax

注意：loaders.sass用于Sass 縮進(jìn)

loaders.vueStyle

更多配置信息查看 vue-style-loader 配置。

optimization

• 類(lèi)型: Object
• 默認(rèn):{ minimize: true, minimizer: [ // terser-webpack-plugin // optimize-css-assets-webpack-plugin ], splitChunks: { chunks: 'all', automaticNameDelimiter: '.', name: undefined, cacheGroups: {} } }

在開(kāi)發(fā)或分析模式下，splitChunks.name的默認(rèn)值為true。 You can set minimizer to a customized Array of plugins or set minimize to false to disable all minimizers. 您可以將minimizer設(shè)置為自定義插件，或?qū)inim設(shè)置為false以禁用所有minimize。(默認(rèn)在開(kāi)發(fā)環(huán)境情況下，minimize被禁用)。

查看 Webpack Optimization來(lái)了解更多配置信息。

terser

• 類(lèi)型: Object 或 Boolean
• 默認(rèn):

{
  parallel: true,
  cache: false,
  sourceMap: false,
  extractComments: {
    filename: 'LICENSES'
  },
  terserOptions: {
    output: {
      comments: /^\**!|@preserve|@license|@cc_on/
    }
  }
}

設(shè)置為false可以禁用此插件。

當(dāng)webpack中 config.devtool 與source-?map匹配時(shí)，將啟用sourceMap

查看 webpack-contrib/terser-webpack-plugin來(lái)了解更多配置信息。

optimizeCSS

• 類(lèi)型: Object 或 Boolean
• 默認(rèn):false{} when extractCSS is enabled

OptimizeCSSAssets 插件配置查看NMFR/optimize-css-assets-webpack-plugin.

parallel

• 類(lèi)型: Boolean
• 默認(rèn): false

在webpack構(gòu)建打包中開(kāi)啟 thread-loader。

plugins

• 類(lèi)型： Array
• 默認(rèn)值： []

配置 Webpack 插件

例如 (nuxt.config.js):

import webpack from 'webpack'
import { version } from './package.json'
export default {
  build: {
    plugins: [
      new webpack.DefinePlugin({
        'process.VERSION': version
      })
    ]
  }
}

postcss

• 類(lèi)型： Array, Object(推薦), Function 或 Boolean

注意：Nuxt.js已應(yīng)用PostCSS Preset Env。默認(rèn)情況下，它將啟用Stage 2功能和Autoprefixer,你可以使用build.postcss.preset來(lái)配置它。

自定義 postcss 配置

默認(rèn)值：

{
  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

• 類(lèi)型: Boolean
• 默認(rèn): 開(kāi)啟只需在命令行中加入： --profile

開(kāi)啟 profiler 請(qǐng)查看 WebpackBar

publicPath

Nuxt.js允許您將dist文件上傳到CDN來(lái)獲得最快渲染性能，只需將publicPath設(shè)置為CDN即可。

• 類(lèi)型: String
• 默認(rèn): '/_nuxt/'

例如 (nuxt.config.js):

export default {
  build: {
    publicPath: 'https://cdn.nuxtjs.org'
  }
}

然后，當(dāng)啟動(dòng)nuxt build時(shí)， 將.nuxt/dist/client目錄的內(nèi)容上傳到您的CDN即可！

quiet

控制部分構(gòu)建信息輸出日志

• 類(lèi)型: Boolean
• 默認(rèn): 檢測(cè)到CI或test環(huán)境時(shí)啟用 std-env

splitChunks

• 類(lèi)型: Object
• 默認(rèn):{ layouts: false, pages: true, commons: true }

如果代碼分模塊用于 layout, pages 和 commons (常用: vue|vue-loader|vue-router|vuex...).

ssr

為服務(wù)器端渲染創(chuàng)建特殊的webpack包。

• 類(lèi)型: Boolean
• 默認(rèn): true 為通用模式，false 為spa模式

如果未提供，則根據(jù)默認(rèn)模式自動(dòng)設(shè)置此選項(xiàng)。

styleResources

• 類(lèi)型: Object
• 默認(rèn): {}

當(dāng)您需要在頁(yè)面中注入一些變量和mixin而不必每次都導(dǎo)入它們時(shí)，這非常有用。

Nuxt.js 使用 https://github.com/nuxt-community/style-resources-module 來(lái)實(shí)現(xiàn)這種行為。

您需要為css預(yù)處理器指定要包含的 模式 / 路徑 ： less, sass, scss 或 stylus

您不能在此處使用路徑別名(~ 和 @)，

:warning: You cannot use path aliases here (~ and @)，你需要使用相對(duì)或絕對(duì)路徑。

安裝 style-resources：

$ yarn add @nuxtjs/style-resources

根據(jù)需要安裝：

• 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: ...
  }
}

然后就可以隨處直接使用定義過(guò)的變量或函數(shù)。

templates

Nuxt.js允許您自定義自己的模板，這些模板將基于Nuxt配置進(jìn)行渲染。 此功能特別適用于使用 modules。

• 類(lèi)型: Array

Example (nuxt.config.js):

export default {
  build: {
    templates: [
      {
        src: '~/modules/support/plugin.js', // `src` 可以是絕對(duì)的或相對(duì)的路徑
        dst: 'support.js', // `dst` 是相對(duì)于項(xiàng)目`.nuxt`目錄
        options: { // 選項(xiàng)`options`選項(xiàng)可以將參數(shù)提供給模板
          live_chat: false
        }
      }
    ]
  }
}

使用lodash.template呈現(xiàn)模板，您可以了解有關(guān)使用它們的更多信息here。

transpile

• 類(lèi)型: Array<string | RegExp>
• 默認(rèn): []

如果要使用Babel與特定的依賴(lài)關(guān)系進(jìn)行轉(zhuǎn)換，你可以在build.transpile中添加它們，transpile中的選項(xiàng)可以是字符串或正則表達(dá)式對(duì)象，用于匹配依賴(lài)項(xiàng)文件名。

vueLoader

注意：此配置在Nuxt 2.0+中已被刪除，請(qǐng)使用 build.loaders.vue 來(lái)替代

• 類(lèi)型: Object
• 默認(rèn):{ 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 允許你在自動(dòng)生成的 vendor.bundle.js 文件中添加一些模塊，以減少應(yīng)用 bundle 的體積。這里說(shuō)的是一些你所依賴(lài)的第三方模塊 (比如 axios)

• 類(lèi)型： Array數(shù)組元素類(lèi)型： String

想要把模塊打包進(jìn) vendor bundle，你可以在 nuxt.config.js 的 build.vendor 字段中配置：

module.exports = {
  build: {
    vendor: ['axios']
  }
}

你也可以配置文件路徑，比如一些自己寫(xiě)的庫(kù):

module.exports = {
  build: {
    vendor: [
      'axios',
      '~plugins/my-lib.js'
    ]
  }
}

watch

您可以使用watch來(lái)監(jiān)聽(tīng)文件更改。此功能特別適用用在modules中。

• 類(lèi)型: Array<String>

export default {
  build: {
    watch: [
      '~/.nuxt/support.js'
    ]
  }
}

followSymlinks

By default, the build process does not scan files inside symlinks. This boolean includes them, thus allowing usage of symlinks inside folders such as the "pages" folder, for example.

• Type: Boolean

export default {
  build: {
    followSymlinks: false
  }
}