Vue.js CLI4 Vue.config.js標準配置（最全註釋）

阿新 • • 發佈：2022-05-20

前言：

Vue.js CLI工具不知不覺發展到了4.0時代，CLI給人最直白的感受是沒有了build資料夾跟config資料夾，所有的配置都在Vue.config.js完成。那麼該檔案的配置至關重要。現在我們來看一下最新配置是怎麼配置的。

有三種方式，推薦第二種標準版（無需安裝依賴，直接複製即可配置）。
1、依賴庫

npm install vue-cli-configjs

2、標準版

// vue.config.js
const path =  require('path');
const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV);
const resolve = (dir) => path.join(__dirname, dir);
module.exports = {
    publicPath: process.env.NODE_ENV === 'production' ? '/site/vue-demo/' : '/',  // 公共路徑
    indexPath: 'index.html' , // 相對於打包路徑index.html的路徑
    outputDir: process.env.outputDir || 'dist', // 'dist', 生產環境構建檔案的目錄
    assetsDir: 'static', // 相對於outputDir的靜態資源(js、css、img、fonts)目錄
    lintOnSave: false, // 是否在開發環境下通過 eslint-loader 在每次儲存時 lint 程式碼
    runtimeCompiler: true, // 是否使用包含執行時編譯器的 Vue 構建版本
    productionSourceMap: !IS_PROD, // 生產環境的 source map
    parallel: require("os").cpus().length > 1, // 是否為 Babel 或 TypeScript 使用 thread-loader。該選項在系統的 CPU 有多於一個核心時自動啟用，僅作用於生產構建。
    pwa: {}, // 向 PWA 外掛傳遞選項。
    chainWebpack: config => {
        config.resolve.symlinks(true); // 修復熱更新失效
        // 如果使用多頁面打包，使用vue inspect --plugins檢視html是否在結果陣列中
        config.plugin("html").tap(args => {
            // 修復 Lazy loading routes Error
            args[0].chunksSortMode = "none";
            return args;
        });
        config.resolve.alias // 新增別名
            .set('@', resolve('src'))
            .set('@assets', resolve('src/assets'))
            .set('@components', resolve('src/components'))
            .set('@views', resolve('src/views'))
            .set('@store', resolve('src/store'));
    },
    css: {
        extract: IS_PROD,
        requireModuleExtension: false,// 去掉檔名中的 .module
        loaderOptions: {
                // 給 less-loader 傳遞 Less.js 相關選項
                less: {
                    // `globalVars` 定義全域性物件，可加入全域性變數
                    globalVars: {
                        primary: '#333'
                    }
                }
        }
    },
    devServer: {
            overlay: { // 讓瀏覽器 overlay 同時顯示警告和錯誤
              warnings: true,
              errors: true
            },
            host: "localhost",
            port: 8080, // 埠號
            https: false, // https:{type:Boolean}
            open: false, //配置自動啟動瀏覽器
            hotOnly: true, // 熱更新
            // proxy: 'http://localhost:8080'   // 配置跨域處理,只有一個代理
            proxy: { //配置多個跨域
                "/api": {
                    target: "http://172.11.11.11:7071",
                    changeOrigin: true,
                    // ws: true,//websocket支援
                    secure: false,
                    pathRewrite: {
                        "^/api": "/"
                    }
                },
                "/api2": {
                    target: "http://172.12.12.12:2018",
                    changeOrigin: true,
                    //ws: true,//websocket支援
                    secure: false,
                    pathRewrite: {
                        "^/api2": "/"
                    }
                },
            }
        }
}

3、升級版

// vue.config.js
const path =  require('path');

const CompressionWebpackPlugin = require("compression-webpack-plugin"); // 開啟gzip壓縮， 按需引用
const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i; // 開啟gzip壓縮， 按需寫入
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin; // 打包分析

const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV);
const resolve = (dir) => path.join(__dirname, dir);
module.exports = {
    publicPath: process.env.NODE_ENV === 'production' ? '/site/vue-demo/' : '/',  // 公共路徑
    indexPath: 'index.html' , // 相對於打包路徑index.html的路徑
    outputDir: process.env.outputDir || 'dist', // 'dist', 生產環境構建檔案的目錄
    assetsDir: 'static', // 相對於outputDir的靜態資源(js、css、img、fonts)目錄
    lintOnSave: false, // 是否在開發環境下通過 eslint-loader 在每次儲存時 lint 程式碼
    runtimeCompiler: true, // 是否使用包含執行時編譯器的 Vue 構建版本
    productionSourceMap: !IS_PROD, // 生產環境的 source map
    parallel: require("os").cpus().length > 1, // 是否為 Babel 或 TypeScript 使用 thread-loader。該選項在系統的 CPU 有多於一個核心時自動啟用，僅作用於生產構建。
    pwa: {}, // 向 PWA 外掛傳遞選項。
    chainWebpack: config => {
        config.resolve.symlinks(true); // 修復熱更新失效
        // 如果使用多頁面打包，使用vue inspect --plugins檢視html是否在結果陣列中
        config.plugin("html").tap(args => {
            // 修復 Lazy loading routes Error
            args[0].chunksSortMode = "none";
            return args;
        });