vue全局 CLI 配置——vue.config.js

配置參考

全局 CLI 配置

有些針對 @vue/cli 的全局配置，例如你慣用的包管理器和你本地保存的 preset，都保存在 home 目錄下一個名叫 .vuerc 的 JSON 文件。你可以用編輯器直接編輯這個文件來更改已保存的選項。

你也可以使用 vue config 命令來審查或修改全局的 CLI 配置。

目標瀏覽器

請查閱指南中的瀏覽器兼容性章節。

vue.config.js

vue.config.js 是一個可選的配置文件，如果項目的 (和 package.json 同級的) 根目錄中存在這個文件，那么它會被 @vue/cli-service 自動加載。你也可以使用 package.json 中的 vue 字段，但是注意這種寫法需要你嚴格遵照 JSON 的格式來寫。

這個文件應該導出一個包含了選項的對象：

// vue.config.js
module.exports = {
  // 選項...
}

baseUrl

從 Vue CLI 3.3 起已棄用，請使用publicPath。

publicPath

  • Type: string

  • Default: '/'

    部署應用包時的基本 URL。用法和 webpack 本身的 output.publicPath 一致，但是 Vue CLI 在一些其他地方也需要用到這個值，所以請始終使用 publicPath 而不要直接修改 webpack 的 output.publicPath。

    默認情況下，Vue CLI 會假設你的應用是被部署在一個域名的根路徑上，例如 https://www.my-app.com/。如果應用被部署在一個子路徑上，你就需要用這個選項指定這個子路徑。例如，如果你的應用被部署在 https://www.my-app.com/my-app/，則設置 publicPath 為 /my-app/。

    這個值也可以被設置為空字符串 ('') 或是相對路徑 ('./')，這樣所有的資源都會被鏈接為相對路徑，這樣打出來的包可以被部署在任意路徑，也可以用在類似 Cordova hybrid 應用的文件系統中。

    ::: warning 相對 publicPath 的限制 相對路徑的 publicPath 有一些使用上的限制。在以下情況下，應當避免使用相對 publicPath:

    • 當使用基于 HTML5 history.pushState 的路由時；

    • 當使用 pages 選項構建多頁面應用時。 :::

    這個值在開發環境下同樣生效。如果你想把開發服務器架設在根路徑，你可以使用一個條件式的值：

    module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? '/production-sub-path/'
    : '/'
}

outputDir

  • Type: string

  • Default: 'dist'

    當運行 vue-cli-service build 時生成的生產環境構建文件的目錄。注意目標目錄在構建之前會被清除 (構建時傳入 --no-clean 可關閉該行為)。

    ::: tip 提示 請始終使用 outputDir 而不要修改 webpack 的 output.path。 :::

assetsDir

  • Type: string

  • Default: ''

    放置生成的靜態資源 (js、css、img、fonts) 的 (相對于 outputDir 的) 目錄。

    ::: tip 提示 從生成的資源覆寫 filename 或 chunkFilename 時，assetsDir 會被忽略。 :::

indexPath

  • Type: string

  • Default: 'index.html'

    指定生成的 index.html 的輸出路徑 (相對于 outputDir)。也可以是一個絕對路徑。

filenameHashing

  • Type: boolean

  • Default: true

    默認情況下，生成的靜態資源在它們的文件名中包含了 hash 以便更好的控制緩存。然而，這也要求 index 的 HTML 是被 Vue CLI 自動生成的。如果你無法使用 Vue CLI 生成的 index HTML，你可以通過將這個選項設為 false 來關閉文件名哈希。

pages

  • Type: Object

  • Default: undefined

    在 multi-page 模式下構建應用。每個“page”應該有一個對應的 JavaScript 入口文件。其值應該是一個對象，對象的 key 是入口的名字，value 是：

    • 一個指定了 entry, template, filename, title 和 chunks 的對象 (除了 entry 之外都是可選的)；
    • 或一個指定其 entry 的字符串。
    module.exports = {
  pages: {
    index: {
      // page 的入口
      entry: 'src/index/main.js',
      // 模板來源
      template: 'public/index.html',
      // 在 dist/index.html 的輸出
      filename: 'index.html',
      // 當使用 title 選項時，
      // template 中的 title 標簽需要是 <title><%= htmlWebpackPlugin.options.title %></title>
      title: 'Index Page',
      // 在這個頁面中包含的塊，默認情況下會包含
      // 提取出來的通用 chunk 和 vendor chunk。
      chunks: ['chunk-vendors', 'chunk-common', 'index']
    },
    // 當使用只有入口的字符串格式時，
    // 模板會被推導為 `public/subpage.html`
    // 并且如果找不到的話，就回退到 `public/index.html`。
    // 輸出文件名會被推導為 `subpage.html`。
    subpage: 'src/subpage/main.js'
  }
}

    ::: tip 提示 當在 multi-page 模式下構建時，webpack 配置會包含不一樣的插件 (這時會存在多個 html-webpack-plugin 和 preload-webpack-plugin 的實例)。如果你試圖修改這些插件的選項，請確認運行 vue inspect。 :::

lintOnSave

  • Type: boolean | 'warning' | 'default' | 'error'

  • Default: 'default'

    是否在開發環境下通過 eslint-loader 在每次保存時 lint 代碼。這個值會在 @vue/cli-plugin-eslint 被安裝之后生效。

    設置為 true 或 'warning' 時，eslint-loader 會將 lint 錯誤輸出為編譯警告。默認情況下，警告僅僅會被輸出到命令行，且不會使得編譯失敗。

    如果你希望讓 lint 錯誤在開發時直接顯示在瀏覽器中，你可以使用 lintOnSave: 'default'。這會強制 eslint-loader 將 lint 錯誤輸出為編譯錯誤，同時也意味著 lint 錯誤將會導致編譯失敗。

    設置為 error 將會使得 eslint-loader 把 lint 警告也輸出為編譯錯誤，這意味著 lint 警告將會導致編譯失敗。

    或者，你也可以通過設置讓瀏覽器 overlay 同時顯示警告和錯誤：

    // vue.config.js
module.exports = {
  devServer: {
    overlay: {
      warnings: true,
      errors: true
    }
  }
}

    當 lintOnSave 是一個 truthy 的值時，eslint-loader 在開發和生產構建下都會被啟用。如果你想要在生產構建時禁用 eslint-loader，你可以用如下配置：

    // vue.config.js
module.exports = {
  lintOnSave: process.env.NODE_ENV !== 'production'
}

runtimeCompiler

  • Type: boolean

  • Default: false

    是否使用包含運行時編譯器的 Vue 構建版本。設置為 true 后你就可以在 Vue 組件中使用 template 選項了，但是這會讓你的應用額外增加 10kb 左右。

    更多細節可查閱：Runtime + Compiler vs. Runtime only。

transpileDependencies

  • Type: Array<string | RegExp>

  • Default: []

    默認情況下 babel-loader 會忽略所有 node_modules 中的文件。如果你想要通過 Babel 顯式轉譯一個依賴，可以在這個選項中列出來。

productionSourceMap

  • Type: boolean

  • Default: true

    如果你不需要生產環境的 source map，可以將其設置為 false 以加速生產環境構建。

crossorigin

  • Type: string

  • Default: undefined

    設置生成的 HTML 中 <link rel="stylesheet"> 和 <script> 標簽的 crossorigin 屬性。

    需要注意的是該選項僅影響由 html-webpack-plugin 在構建時注入的標簽 - 直接寫在模版 (public/index.html) 中的標簽不受影響。

    更多細節可查閱: CORS settings attributes

integrity

  • Type: boolean

  • Default: false

    在生成的 HTML 中的 <link rel="stylesheet"> 和 <script> 標簽上啟用 Subresource Integrity (SRI)。如果你構建后的文件是部署在 CDN 上的，啟用該選項可以提供額外的安全性。

    需要注意的是該選項僅影響由 html-webpack-plugin 在構建時注入的標簽 - 直接寫在模版 (public/index.html) 中的標簽不受影響。

    另外，當啟用 SRI 時，preload resource hints 會被禁用，因為 Chrome 的一個 bug 會導致文件被下載兩次。

configureWebpack

  • Type: Object | Function

    如果這個值是一個對象，則會通過 webpack-merge 合并到最終的配置中。

    如果這個值是一個函數，則會接收被解析的配置作為參數。該函數既可以修改配置并不返回任何東西，也可以返回一個被克隆或合并過的配置版本。

    更多細節可查閱：配合 webpack > 簡單的配置方式

chainWebpack

  • Type: Function

    是一個函數，會接收一個基于 webpack-chain 的 ChainableConfig 實例。允許對內部的 webpack 配置進行更細粒度的修改。

    更多細節可查閱：配合 webpack > 鏈式操作

css.modules

從 v4 起已棄用，請使用css.requireModuleExtension。 在 v3 中，這個選項含義與 css.requireModuleExtension 相反。

css.requireModuleExtension

  • Type: boolean

  • Default: true

    默認情況下，只有 *.module.[ext] 結尾的文件才會被視作 CSS Modules 模塊。設置為 false 后你就可以去掉文件名中的 .module 并將所有的 *.(css|scss|sass|less|styl(us)?) 文件視為 CSS Modules 模塊。

    ::: tip 提示 如果你在 css.loaderOptions.css 里配置了自定義的 CSS Module 選項，則 css.requireModuleExtension 必須被顯式地指定為 true 或者 false，否則我們無法確定你是否希望將這些自定義配置應用到所有 CSS 文件中。 :::

    更多細節可查閱：配合 CSS > CSS Modules

css.extract

  • Type: boolean | Object

  • Default: 生產環境下是 true，開發環境下是 false

    是否將組件中的 CSS 提取至一個獨立的 CSS 文件中 (而不是動態注入到 JavaScript 中的 inline 代碼)。

    同樣當構建 Web Components 組件時它總是會被禁用 (樣式是 inline 的并注入到了 shadowRoot 中)。

    當作為一個庫構建時，你也可以將其設置為 false 免得用戶自己導入 CSS。

    提取 CSS 在開發環境模式下是默認不開啟的，因為它和 CSS 熱重載不兼容。然而，你仍然可以將這個值顯性地設置為 true 在所有情況下都強制提取。

css.sourceMap

  • Type: boolean

  • Default: false

    是否為 CSS 開啟 source map。設置為 true 之后可能會影響構建的性能。

css.loaderOptions

  • Type: Object

  • Default: {}

    向 CSS 相關的 loader 傳遞選項。例如：

    module.exports = {
  css: {
    loaderOptions: {
      css: {
        // 這里的選項會傳遞給 css-loader
      },
      postcss: {
        // 這里的選項會傳遞給 postcss-loader
      }
    }
  }
}

    支持的 loader 有：

    另外，也可以使用 scss 選項，針對 scss 語法進行單獨配置（區別于 sass 語法）。

    更多細節可查閱：向預處理器 Loader 傳遞選項

    ::: tip 提示 相比于使用 chainWebpack 手動指定 loader 更推薦上面這樣做，因為這些選項需要應用在使用了相應 loader 的多個地方。 :::

devServer

  • Type: Object

    所有 webpack-dev-server 的選項都支持。注意：

    • 有些值像 host、port 和 https 可能會被命令行參數覆寫。

    • 有些值像 publicPath 和 historyApiFallback 不應該被修改，因為它們需要和開發服務器的 publicPath 同步以保障正常的工作。

devServer.proxy

  • Type: string | Object

    如果你的前端應用和后端 API 服務器沒有運行在同一個主機上，你需要在開發環境下將 API 請求代理到 API 服務器。這個問題可以通過 vue.config.js 中的 devServer.proxy 選項來配置。

    devServer.proxy 可以是一個指向開發環境 API 服務器的字符串：

    module.exports = {
  devServer: {
    proxy: 'http://localhost:4000'
  }
}

    這會告訴開發服務器將任何未知請求 (沒有匹配到靜態文件的請求) 代理到http://localhost:4000。

    如果你想要更多的代理控制行為，也可以使用一個 path: options 成對的對象。完整的選項可以查閱 http-proxy-middleware 。

    module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: '<url>',
        ws: true,
        changeOrigin: true
      },
      '/foo': {
        target: '<other_url>'
      }
    }
  }
}

parallel

  • Type: boolean

  • Default: require('os').cpus().length > 1

    是否為 Babel 或 TypeScript 使用 thread-loader。該選項在系統的 CPU 有多于一個內核時自動啟用，僅作用于生產構建。

pwa

pluginOptions

  • Type: Object

    這是一個不進行任何 schema 驗證的對象，因此它可以用來傳遞任何第三方插件選項。例如：

    module.exports = {
  pluginOptions: {
    foo: {
      // 插件可以作為 `options.pluginOptions.foo` 訪問這些選項。
    }
  }
}

Babel

Babel 可以通過 babel.config.js 進行配置。

::: tip Vue CLI 使用了 Babel 7 中的新配置格式 babel.config.js。和 .babelrc 或 package.json 中的 babel 字段不同，這個配置文件不會使用基于文件位置的方案，而是會一致地運用到項目根目錄以下的所有文件，包括 node_modules 內部的依賴。我們推薦在 Vue CLI 項目中始終使用 babel.config.js 取代其它格式。 :::

所有的 Vue CLI 應用都使用 @vue/babel-preset-app，它包含了 babel-preset-env、JSX 支持以及為最小化包體積優化過的配置。通過它的文檔可以查閱到更多細節和 preset 選項。

同時查閱指南中的 Polyfill 章節。

ESLint

ESLint 可以通過 .eslintrc 或 package.json 中的 eslintConfig 字段來配置。

更多細節可查閱 @vue/cli-plugin-eslint。

TypeScript

TypeScript 可以通過 tsconfig.json 來配置。

更多細節可查閱 @vue/cli-plugin-typescript。

單元測試

Jest

更多細節可查閱 @vue/cli-plugin-unit-jest。

Mocha (配合 mocha-webpack)

更多細節可查閱 @vue/cli-plugin-unit-mocha。

E2E 測試

Cypress

更多細節可查閱 @vue/cli-plugin-e2e-cypress。

Nightwatch

更多細節可查閱 @vue/cli-plugin-e2e-nightwatch。

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容