#全局 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 = {
// 選項...
}
參考配置
// const path = require('path');
module.exports = {
/** 區分打包環境與開發環境
* process.env.NODE_ENV==='production' (打包環境)
* process.env.NODE_ENV==='development' (開發環境)
* baseUrl: process.env.NODE_ENV==='production'?"https://xxx":'',
*/
// 項目部署的基礎路徑
// 我們默認假設你的應用將會部署在域名的根部,
// 例如 https://www.my-app.com/
// 如果你的應用部署在一個子路徑下，那么你需要在這里
// 指定子路徑。比如將你的應用部署在
// https://www.foobar.com/my-app/
// 那么將這個值改為 '/my-app/'
//baseUrl: '/',//vue-cli3.3以下版本使用
publicPath: '/',//vue-cli3.3+新版本使用
// 構建好的文件輸出到哪里
outputDir: "dist",
// assetsDir: "base" //靜態資源打包地址
//以多頁模式構建應用程序。
pages: undefined,
// 是否在保存時使用‘eslint-loader’進行檢查 // 有效值: true | false | 'error'
// 當設置為‘error’時，檢查出的錯誤會觸發編譯失敗
lintOnSave: true,
// 使用帶有瀏覽器內編譯器的完整構建版本,是否使用包含運行時編譯器的 Vue 構建版本
runtimeCompiler: false,
// babel-loader默認會跳過`node_modules`依賴. // 通過這個選項可以顯示轉譯一個依賴
// 默認babel-loader忽略mode_modules，這里可增加例外的依賴包名
transpileDependencies: [],
// 是否在構建生產包時生成 sourceMap 文件，false將提高構建速度 映射文件 打包時使用
productionSourceMap: false,
// 調整內部的webpack配置.
// see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
chainWebpack: () => { },
// chainWebpack: () => {
// // 刪除懶加載模塊的prefetch，降低帶寬壓力
// // 而且預渲染時生成的prefetch標簽是modern版本的，低版本瀏覽器是不需要的
// //config.plugins.delete('prefetch');
// //if(process.env.NODE_ENV === 'production') {
// // 為生產環境修改配置...process.env.NODE_ENV !== 'development'
// //} else {
// // 為開發環境修改配置...
// //}
// },
configureWebpack: () => { },
// configureWebpack: () => {
// // 生產and測試環境
// let pluginsPro = [
// new CompressionPlugin({ //文件開啟Gzip，也可以通過服務端(如：nginx)
// filename: '[path].gz[query]',
// algorithm: 'gzip',
// test: new RegExp('\\.(' + ['js', 'css'].join('|') + ')$'),
// threshold: 8192,
// minRatio: 0.8,
// }),
// new BundleAnalyzerPlugin(),
// ];
// //開發環境
// let pluginsDev = [
// new vConsolePlugin({
// filter: [], // 需要過濾的入口文件
// enable: true // 發布代碼前記得改回 false
// }),
// ];
// if (process.env.NODE_ENV === 'production') { // 為生產環境修改配置...process.env.NODE_ENV !== 'development'
// config.plugins = [...config.plugins, ...pluginsPro];
// } else {
// // 為開發環境修改配置...
// config.plugins = [...config.plugins, ...pluginsDev];
// }
// },
// CSS 相關選項
css: {
// 將組件內部的css提取到一個單獨的css文件（只用在生產環境）
// 也可以是傳遞給 extract-text-webpack-plugin 的選項對象
// 是否使用css分離插件 ExtractTextPlugin，采用獨立樣式文件載入，不采用<style>方式內聯至html文件中
extract: true,
// 是否在構建css樣式映射，false將提高構建速度
sourceMap: false,
// css預設器配置項
loaderOptions: {
// sass: {
// data: ''//`@import "@/assets/scss/mixin.scss";`
// }
},
// 啟用 CSS modules for all css / pre-processor files.
modules: false
},
// 構建時開啟多進程處理 babel 編譯
//是否為 Babel 或 TypeScript 使用 thread-loader。
//該選項在系統的 CPU 有多於一個內核時自動啟用，僅作用於生產構建，在適當的時候開啟幾個子進程去並發的執行壓縮
parallel: require("os").cpus().length > 1,
// PWA 插件相關配置
// 單頁插件相關配置 https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
pwa: {},
//vue3.0+
devServer: {//跨域
open: process.platform === "darwin",
//open: true, //配置自動啟動瀏覽器
disableHostCheck: false,
host: "0.0.0.0",
// host: "0.0.0.0" =>
// App running at:
// - Local: http://localhost:8080/
// - Network: http://192.168.1.102:8080/
// host: "127.0.0.1"=>
// App running at:
// - Local: http://127.0.0.1:8080/
// - Network: http://127.0.0.1:8080/
port: 8080,// 端口號
https: false,// true 配置之后可使用生成 https://localhost:8080/
hotOnly: false,// 熱更新（webpack已實現了，這里false即可）
// proxy: null // 設置代理
proxy: 'http://localhost:8080' // 配置跨域處理,只設一個代理
// proxy: { //多個
// // 配置跨域處理 可以設置多個
// '/api': {
// target: 'https://www.baidu.com/api',
// ws: true,
// changeOrigin: true
// }
// }
// before: app => {}
},
// vue 2.0 設置跨域
// dev: {
// // proxyTable: {
// // '/api': {
// // target: 'http://127.0.0.1:8080', // 目標地址
// // changeOrigin: true,
// // pathRewrite: {
// // '^/api': '' // 將目標地址變成這個
// // }
// // }
// // },
// },
// 是否啟用dll webpack dll
// 關於dll只做簡單解釋 未附詳細代碼
// webpack.dll.conf.js
// 1、entry配置需要dll打包的庫
// 2、module配置處理對應文件類型的loader
// 3、增加 webpack.DllPlugin插件
// (1)、path:生成mainfest.json文件的絕對路徑。mainfest.json里面的內容為所有被打包到dll.js文件模塊id的映射。
// (2)、name：webpack打包時mainfest.json包含的庫的暴露出來的函數名名
// (3)、contenxt(可選):引入manifest文件的context，默認為webpack的context
// dll: false,//配置好dll庫，設置dll：true；可優化打包效率。減少打包時間，增加庫緩存
// 第三方插件配置
pluginOptions: {},
// pluginOptions: {
// 'style-resources-loader': {//https://github.com/yenshih/style-resources-loader
// preProcessor: 'scss',//聲明類型
// 'patterns': [
// //path.resolve(__dirname, './src/assets/scss/_common.scss'),
// ],
// //injector: 'append'
// }
// }
};
具體屬性含義
#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 應用的文件系統中。相對 publicPath 的限制
相對路徑的
publicPath有一些使用上的限制。在以下情況下，應當避免使用相對publicPath:- 當使用基於 HTML5
history.pushState的路由時； - 當使用
pages選項構建多頁面應用時。
這個值在開發環境下同樣生效。如果你想把開發服務器架設在根路徑，你可以使用一個條件式的值：
module.exports = { publicPath: process.env.NODE_ENV === 'production' ? '/production-sub-path/' : '/' } - 當使用基於 HTML5
#outputDir
-
Type:
string -
Default:
'dist'當運行
vue-cli-service build時生成的生產環境構建文件的目錄。注意目標目錄在構建之前會被清除 (構建時傳入--no-clean可關閉該行為)。提示
請始終使用
outputDir而不要修改 webpack 的output.path。
#assetsDir
-
Type:
string -
Default:
''放置生成的靜態資源 (js、css、img、fonts) 的 (相對於
outputDir的) 目錄。提示
從生成的資源覆寫 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' } }提示
當在 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 模塊。提示
如果你在
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 傳遞選項
提示
相比於使用
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
-
Type:
Object向 PWA 插件傳遞選項。
#pluginOptions
-
Type:
Object這是一個不進行任何 schema 驗證的對象，因此它可以用來傳遞任何第三方插件選項。例如：
module.exports = { pluginOptions: { foo: { // 插件可以作為 `options.pluginOptions.foo` 訪問這些選項。 } } }
#Babel
Babel 可以通過 babel.config.js 進行配置。
提示
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。
參考: