閱讀(4.9k) 書簽贊(0) 我要糾錯

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

2020-02-13 17:36 更新

構(gòu)建配置

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

analyze

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

類型： Boolean 或 Object
默認值： false

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

例如 (nuxt.config.js):

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

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

babel

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

類型: Object
默認:

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

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

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

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

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

Example for custom presets:

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

cache

類型: Boolean
默認: false
?? 實驗性的

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

crossorigin

類型: String
默認: undefined

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

cssSourceMap

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

開啟 CSS Source Map 支持

devMiddleware

類型: Object

請查看 webpack-dev-middleware 了解更多可用選項。

devtools

類型: boolean
默認: false

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

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

extend

類型： Function

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

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

Webpack 配置對象
構(gòu)建環(huán)境對象，包括這些屬性(全部為布爾類型):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'
      }
    }
  }
}

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

loaders in extend

loaders具有與之相同的對象結(jié)構(gòu) 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 服務(wù)器端渲染指南啟用常見CSS提取。

類型: Boolean
默認: false

使用extract-css-chunks-webpack-plugin將主塊中的 CSS 提取到一個單獨的 CSS 文件中（自動注入模板），該文件允許單獨緩存文件。當(dāng)有很多共用 CSS 時建議使用此方法，異步組件中的 CSS 將保持內(nèi)聯(lián)為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 名稱更改為數(shù)字id (nuxt.config.js):

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

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

friendlyErrors

類型: Boolean
默認: true (啟用疊加)

友好的錯誤 Webpack 插件

hardSource

類型: Boolean
默認: false
?? 實驗性的

開啟 HardSourceWebpackPlugin

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
}

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

loaders

類型： 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中指定配置外，它還可以通過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: {} } }

在開發(fā)或分析模式下，splitChunks.name的默認值為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。(默認在開發(fā)環(huán)境情況下，minimize被禁用)。

查看 Webpack Optimization來了解更多配置信息。

terser

類型: Object 或 Boolean
默認:

{
  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匹配時，將啟用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構(gòu)建打包中開啟 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已應(yīng)用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設(shè)置為CDN即可。

類型: String
默認: '/_nuxt/'

例如 (nuxt.config.js):

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

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

quiet

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

類型: Boolean
默認: 檢測到CI或test環(huán)境時啟用 std-env

splitChunks

類型: Object
默認:{ layouts: false, pages: true, commons: true }

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

ssr

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

類型: Boolean
默認: true 為通用模式，false 為spa模式

如果未提供，則根據(jù)默認模式自動設(shè)置此選項。

styleResources

類型: Object
默認: {}

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

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

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

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

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

安裝 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: ...
  }
}

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

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`選項可以將參數(shù)提供給模板
          live_chat: false
        }
      }
    ]
  }
}

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

transpile

類型: Array<string | RegExp>
默認: []

如果要使用Babel與特定的依賴關(guān)系進行轉(zhuǎn)換，你可以在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 文件中添加一些模塊，以減少應(yīng)用 bundle 的體積。這里說的是一些你所依賴的第三方模塊 (比如 axios)

類型： Array數(shù)組元素類型： String

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

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

你也可以配置文件路徑，比如一些自己寫的庫:

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

watch

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

類型: 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
  }
}

以上內(nèi)容是否對您有幫助：

← UTILS

Nuxt.js buildDir 屬性 →

寫筆記

我要補充

查看完整版筆記

国产chinesehdxxxx野外,国产av无码专区亚洲av琪琪,播放男人添女人下边视频,成人国产精品一区二区免费看,chinese丰满人妻videos

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

構(gòu)建配置

analyze

babel

cache

crossorigin

cssSourceMap

devMiddleware

devtools

extend

loaders in extend

extractCSS

filenames

friendlyErrors

hardSource

hotMiddleware

html.minify

loaders

loaders.file

loaders.fontUrl and loaders.imgUrl

loaders.pugPlain

loaders.vue

loaders.css and loaders.cssModules

loaders.less

loaders.sass and loaders.scss

loaders.vueStyle

optimization

terser

optimizeCSS

parallel

plugins

postcss

profile

publicPath

quiet

splitChunks

ssr

styleResources

templates

transpile

vueLoader

vendor

watch

followSymlinks