vue.config.js 文件是 Vue CLI 項(xiàng)目中的全局配置文件，它允許你以 JavaScript 的形式來配置構(gòu)建選項(xiàng)，而不是通過命令行參數(shù)或者 .vue-clirc 的 JSON 格式。
官方文檔: https://cli.vuejs.org/zh/config/#全局-cli-配置

基礎(chǔ)配置

1. publicPath

   • 設(shè)置構(gòu)建好的文件被部署后的公共路徑。

   module.exports = {publicPath: process.env.NODE_ENV === 'production' ? '/my-app/' : '/',
   };
   

2. outputDir

   • 構(gòu)建輸出的目錄，默認(rèn)是 dist。

   module.exports = {outputDir: 'dist',
   };
   

3. assetsDir

   • 用于放置生成的靜態(tài)資源 (js、css、img、fonts) 的；（項(xiàng)目打包之后，靜態(tài)資源會放在這個文件夾下）。

   module.exports = {assetsDir: "static",
   };
   

4. indexPath

   • 指定生成的 index.html 的輸出路徑 (相對于 outputDir)。也可以是一個絕對路徑。默認(rèn) 'index.html'

   module.exports = {indexPath: "index.html",
   };
   

5. productionSourceMap

   • 如果你不需要生產(chǎn)環(huán)境的 source map，可以將其設(shè)置為 false 以加速生產(chǎn)環(huán)境構(gòu)建。

   module.exports = {productionSourceMap: false,
   };
   

6. filenameHashing

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

   module.exports = {filenameHashing: false,
   };
   

7. lintOnSave

   • 是否開啟 eslint 保存檢測，有效值：ture | false | 'error'。
   • 設(shè)置為 true 或 'warning' 時(shí)，eslint-loader 會將 lint 錯誤輸出為編譯警告。默認(rèn)情況下，警告僅僅會被輸出到命令行，且不會使得編譯失敗。
   • 如果你希望讓 lint 錯誤在開發(fā)時(shí)直接顯示在瀏覽器中，你可以使用 lintOnSave: 'default'。這會強(qiáng)制 eslint-loader 將 lint 錯誤輸出為編譯錯誤，同時(shí)也意味著 lint 錯誤將會導(dǎo)致編譯失敗。
   • 設(shè)置為 error 將會使得 eslint-loader 把 lint 警告也輸出為編譯錯誤，這意味著 lint 警告將會導(dǎo)致編譯失敗。
   • 設(shè)置 false 關(guān)閉 lint 警告

   module.exports = {lintOnSave: false,
   };
   

8. runtimeCompiler

   • 是否使用包含運(yùn)行時(shí)編譯器的 Vue 構(gòu)建版本。設(shè)置為 true 后你就可以在 Vue 組件中使用 template 選項(xiàng)了，但是這會讓你的應(yīng)用額外增加 10kb 左右。默認(rèn) false

   module.exports = {runtimeCompiler: false,
   };
   

   更多細(xì)節(jié)可查閱： Runtime + Compiler vs. Runtime only

9. transpileDependencies

   • 默認(rèn)情況下 babel-loader 會忽略所有 node_modules 中的文件。你可以啟用本選項(xiàng)，以避免構(gòu)建后的代碼中出現(xiàn)未轉(zhuǎn)譯的第三方依賴。

   不過，對所有的依賴都進(jìn)行轉(zhuǎn)譯可能會降低構(gòu)建速度。如果對構(gòu)建性能有所顧慮，你可以只轉(zhuǎn)譯部分特定的依賴：給本選項(xiàng)傳一個數(shù)組，列出需要轉(zhuǎn)譯的第三方包包名或正則表達(dá)式即可。

   module.exports = {transpileDependencies: false,
   };
   

10. crossorigin

    • 設(shè)置生成的 HTML 中 <link rel="stylesheet"> 和 <script> 標(biāo)簽的 crossorigin 屬性。

    需要注意的是該選項(xiàng)僅影響由 html-webpack-plugin 在構(gòu)建時(shí)注入的標(biāo)簽 - 直接寫在模版 (public/index.html) 中的標(biāo)簽不受影響。

    crossorigin: 如果配置了該屬性，會讓瀏覽器啟用CORS檢查（判斷響應(yīng)頭中Access-Control-Allow-Origin是否與當(dāng)前文檔同源），如果檢查不通過，則瀏覽器拒絕執(zhí)行代碼。

    stylesheet: 導(dǎo)入樣式表。link 標(biāo)簽使用了 rel="stylesheet" 表示該文件是一份樣式表文件?？梢宰?HTML 頁面具有更好的外觀和布局。

    module.exports = {crossorigin: false,
    };
    

11. integrity

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

    • 需要注意的是該選項(xiàng)僅影響由 html-webpack-plugin 在構(gòu)建時(shí)注入的標(biāo)簽 - 直接寫在模版 (public/index.html) 中的標(biāo)簽不受影響。

    • 當(dāng)啟用 SRI 時(shí)，preload resource hints 會被禁用，因?yàn)?Chrome 的一個 bug 會導(dǎo)致文件被下載兩次。

    module.exports = {integrity: false,
    };
    

12. configureWebpack

    • 如果這個值是一個對象，則會通過 w[]ebpack-merge](https://github.com/survivejs/webpack-merge) 合并到最終的配置中。
    • 如果這個值是一個函數(shù)，則會接收被解析的配置作為參數(shù)。該函數(shù)既可以修改配置并不返回任何東西，也可以返回一個被克隆或合并過的配置版本。更多細(xì)節(jié)請查閱 配合 webpack > 簡單的配置方式

    module.exports = {configureWebpack: {}, // ()=> {}
    };
    

13. chainWebpack

    • 是一個函數(shù)，會接收一個基于 webpack-chain 的 ChainableConfig 實(shí)例。允許對內(nèi)部的 webpack 配置進(jìn)行更細(xì)粒度的修改。更多細(xì)節(jié)可查閱：配合 webpack > 鏈?zhǔn)讲僮?/li>

    module.exports = {chainWebpack: ()=> {}
    };
    

14. css.modules

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

    module.exports = {css: {modules: false,}
    };
    

15. pages

    • 定義多個入口頁面。

    module.exports = {// 配置多頁面入口pages: {index: { // 默認(rèn)入口// page 的入口entry: 'src/index/main.js',// 模板來源template: 'public/index.html',// 在 dist/index.html 的輸出filename: 'index.html',// 當(dāng)使用 title 選項(xiàng)時(shí)，// template 中的 <title> 標(biāo)簽需要是 <title><%= htmlWebpackPlugin.options.title %></title>title: 'Index Page',// 片段注入到頁面的地點(diǎn)，// 可以是 (head / end / body / top / bottom)chunks: ['chunk-vendors', 'chunk-common', 'index']},otherpage: { // 新增的入口// page 的入口entry: 'src/otherpage/main.js',// 模板來源template: 'public/otherpage.html',  // 或者 'public/otherpage/otherpage.html'// 在 dist/otherpage.html 的輸出filename: 'otherpage.html',// 當(dāng)使用 title 選項(xiàng)時(shí)，// template 中的 <title> 標(biāo)簽需要是 <title><%= htmlWebpackPlugin.options.title %></title>title: 'Other Page',// 片段注入到頁面的地點(diǎn)，// 可以是 (head / end / body / top / bottom)chunks: ['chunk-vendors', 'chunk-common', 'otherpage']}}
    }
    

    參考鏈接: vue.config.js 配置多入口文件

配置 devserve

module.exports = {devServer: {host: '0.0.0.0', // 讓你的服務(wù)器可以被外部訪問port: 8080, // 端口https: false, // 不使用 HTTP 提供服務(wù)hot: true, //  模塊熱替換open: true, // 打開瀏覽器client:{overlay: { // 當(dāng)出現(xiàn)編譯錯誤或警告時(shí)，在瀏覽器中顯示全屏覆蓋。warnings: true,errors: true},progress: true, // 在瀏覽器中以百分比形式打印編譯進(jìn)度。},headers: { // 設(shè)置請求頭'X-Custom-Header': 'value'},compress: true, // 啟用 gzip 壓縮proxy: {'/api': { // 對 /api 的請求會將請求代理到 http://localhost:4000。target: 'http://localhost:4000',changeOrigin: true, // 使 Origin 請求頭中的主機(jī)名變?yōu)槟繕?biāo) URL 的主機(jī)名secure: false, // 不驗(yàn)證 SSL 證書logLevel: 'warn', // 代理的日志級別ws: true, // 使用 WebSockets 作為服務(wù)器pathRewrite: { // 重寫路徑'^/api': ''},router: function(req) {if (req.url.startsWith('/api')) {return '/api';}return false;},context: ['/api'],bypass: function(req) {if (req.headers.accept.indexOf('html') !== -1) {return '/index.html';}}}},contentBase: './public', // 開發(fā)服務(wù)器提供的靜態(tài)文件目錄historyApiFallback: true, // 是否啟用 HTML5 history API 的回退before: function(app, server) {// 在服務(wù)器啟動之前執(zhí)行的函數(shù)},after: function(app, server) {// 在服務(wù)器啟動之后執(zhí)行的函數(shù)},setupMiddlewares: true,  // 設(shè)置中間件}
};

參考鏈接: vue.config.js 配置 devserve 配置

配置 configureWebpack 和 chainWebpack

configureWebpack

configureWebpack 允許你在 Vue CLI 項(xiàng)目中直接修改 Webpack 的配置。它可以通過一個對象或一個函數(shù)來實(shí)現(xiàn)。如果你使用的是一個函數(shù)，那么它會接收默認(rèn)的 Webpack 配置作為參數(shù)，并且你應(yīng)該返回一個修改過的配置對象。

配置示例:

const path = require("path");
const TerserPlugin = require("terser-webpack-plugin");
const WebpackObfuscator = require('webpack-obfuscator');function resolve(dir) {return path.join(__dirname, dir);
}
const name = '瀏覽器網(wǎng)頁標(biāo)題';
module.exports = {configureWebpack: (config) => {config.name = name,config.resolve = {...config.resolve,alias: {"@": resolve("src"), // 配置別名 @'vue': path.resolve(__dirname, './', 'node_modules', 'vue') // 去重vue包,多個vue包會導(dǎo)致element-ui 里的 table 組件不生效}},config.optimization = {...config.minimizer,minimizer: [new TerserPlugin({terserOptions: {compress: {drop_console: true, // 去除 console.logdrop_debugger: true, // 去除 debugger},},}),]}if (process.env.NODE_ENV === 'production') {config.plugins.push(new WebpackObfuscator({// 壓縮代碼compact: true,// 是否啟用控制流扁平化(降低1.5倍的運(yùn)行速度)controlFlowFlattening: false,// 隨機(jī)的死代碼塊(增加了混淆代碼的大小)deadCodeInjection: false,// 此選項(xiàng)幾乎不可能使用開發(fā)者工具的控制臺選項(xiàng)卡debugProtection: false,// 如果選中，則會在“控制臺”選項(xiàng)卡上使用間隔強(qiáng)制調(diào)試模式，從而更難使用“開發(fā)人員工具”的其他功能。debugProtectionInterval: false,// 通過用空函數(shù)替換它們來禁用console.log，console.info，console.error和console.warn。這使得調(diào)試器的使用更加困難。disableConsoleOutput: true,// 標(biāo)識符的混淆方式 hexadecimal(十六進(jìn)制) mangled(短標(biāo)識符)identifierNamesGenerator: 'hexadecimal',log: false,// 是否啟用全局變量和函數(shù)名稱的混淆renameGlobals: false,// 通過固定和隨機(jī)（在代碼混淆時(shí)生成）的位置移動數(shù)組。這使得將刪除的字符串的順序與其原始位置相匹配變得更加困難。如果原始源代碼不小，建議使用此選項(xiàng)，因?yàn)檩o助函數(shù)可以引起注意。rotateStringArray: true,// 混淆后的代碼,不能使用代碼美化,同時(shí)需要配置 cpmpat:true;selfDefending: true,// 刪除字符串文字并將它們放在一個特殊的數(shù)組中stringArray: true,rotateUnicodeArray: true,//  stringArrayEncoding: 'base64',stringArrayEncoding: ['base64'],stringArrayThreshold: 0.75,// 允許啟用/禁用字符串轉(zhuǎn)換為unicode轉(zhuǎn)義序列。Unicode轉(zhuǎn)義序列大大增加了代碼大小，并且可以輕松地將字符串恢復(fù)為原始視圖。建議僅對小型源代碼啟用此選項(xiàng)。unicodeEscapeSequence: false,// 允許啟用/禁用字符串轉(zhuǎn)換為unicode轉(zhuǎn)義序列。Unicode轉(zhuǎn)義序列大大增加了代碼大小，并且可以輕松地將字符串恢復(fù)為原始視圖。建議僅對小型源代碼啟用此選項(xiàng)。transformObjectKeys: true,}))}},
}

chainWebpack

chainWebpack 是 Vue CLI 提供的一種更強(qiáng)大的方式來修改 Webpack 的配置。與 configureWebpack 不同，chainWebpack 使用 Webpack Chain API，它允許你以一種聲明式的方式來修改 Webpack 配置

配置示例:

const path = require("path");
module.exports = {chainWebpack: (config) => {// 修改 HTML 插件的選項(xiàng)config.plugin('html').tap(args => {args[0].title = 'My App';return args;});// 修改模塊規(guī)則config.module.rule('images').test(/\.(png|jpe?g|gif|webp)(\?.*)?$/).use('url-loader').loader('url-loader').options({limit: 10000,name: 'img/[name].[hash:7].[ext]'});// 去除 debuggerconfig.when(process.env.NODE_ENV === 'production', config => {config.optimization.minimize(true);config.optimization.minimizer('terser').tap(args => {args[0].terserOptions.compress.drop_debugger = true;return args;});});// 添加別名config.resolve.alias.set('@components', resolve('src/components')).set('@assets', resolve('src/assets'));// 添加額外的插件config.plugin('define').tap(args => {args[0]['process.env'].VUE_APP_VERSION = JSON.stringify(process.env.VUE_APP_VERSION || '');return args;});// 修改輸出選項(xiàng)config.output.filename('[name].[contenthash].js');},
};function resolve(dir) {return path.join(__dirname, dir);
}

參考鏈接: vue.config.js 配置configureWebpack 和 chainWebpack 以及一些常用配置