vueCli4如何設定vue.config.js檔案

2022-03-28 16:00:39

vueCli4設定vue.config.js

const path = require('path')
const CompressionPlugin = require('compression-webpack-plugin') //cnpm install --save-dev compression-webpack-plugin外掛需要npm安裝
function resolve(dir) {
    return path.join(__dirname, dir)
}
module.exports = {
    publicPath: './', //基本路徑
    outputDir: 'dist', //輸出檔案目錄
    assetsDir: 'static', //css js 等靜態檔案目錄
    // lintOnSave: 'error', // 設定eslint報錯時停止程式碼編譯
    lintOnSave: false,
    productionSourceMap: false, // 不需要生產環境的 source map（減小dist檔案大小，加速構建）
    devServer: {
        open: true,  // npm run serve後自動開啟頁面
        host: '0.0.0.0',  // 匹配本機IP地址(預設是0.0.0.0)
        port: 8989, // 開發伺服器執行埠號
        proxy: {
            '/api': {
                target: process.env.VUE_APP_BASE_URL, // 代理介面地址
                secure: false,  // 如果是https介面，需要設定這個引數
                changeOrigin: true, // 是否跨域
                pathRewrite: {
                    '^/api': ''   //需要rewrite的, 這裡理解成以'/api'開頭的介面地址，把/api代替target中的地址
                }
            }
        }
    },
    chainWebpack: (config) => {
        // 移除 prefetch 外掛(針對生產環境首屏請求數進行優化)
        config.plugins.delete('prefetch')
        // 移除 preload 外掛(針對生產環境首屏請求數進行優化)
        config.plugins.delete('preload')
        // 第1個引數：別名，第2個引數：路徑  （設定路徑別名）
        config.resolve.alias
            .set('@pages', resolve('./src/page'))
            .set('@router', resolve('./src/router'))
            .set('@store', resolve('./src/store'))
            .set('@utils', resolve('./src/utils'))
    },
    // 設定打包 js、css檔案為.gz格式，優化載入速度  （參考：https://blog.csdn.net/qq_31677507/article/details/102742196）
    configureWebpack: config => {
        if (process.env.NODE_ENV === 'production') {
            return {
                plugins: [new CompressionPlugin({
                    test: /.js$|.css/, // 匹配檔案
                    threshold: 10240, // 超過10kB的資料進行壓縮
                    deleteOriginalAssets: false // 是否刪除原檔案 （原檔案也建議釋出到伺服器以支援不相容gzip的瀏覽器）
                })],
                performance: { // 生產環境構建程式碼檔案超出以下設定大小會在命令列中顯示警告
                    hints: 'warning',
                    // 入口起點的最大體積 整數型別（以位元組為單位,預設值是：250000 (bytes)）
                    maxEntrypointSize: 5000000,
                    // 生成檔案的最大體積 整數型別（以位元組為單位,預設值是：250000 (bytes)）
                    maxAssetSize: 3000000
                    // // 只給出 js 檔案的效能提示
                    // assetFilter: function (assetFilename) {
                    //   return assetFilename.endsWith('.js')
                    // }
                }
            }
        }
    }
}

vueCli4組態檔路徑別名及使用

在開發vue專案中，我們經常需要引入不同的檔案，這時就需要針對檔案的路徑進行設定，僅僅使用./ .//來進行檔案的匯入，維護和更改都變的相當麻煩，需要對檔案的路徑相當熟悉才可以

所以可以設定alias別名來方便操作，然後腳手架cli4中並沒有和cli2一樣自動生成一個webpack.base.config.js檔案來讓我們直接寫別名。所以需要我們自行建立，步驟如下：

專案根目錄下建立vue.config.js檔案

與package.json 同級目錄

組態檔中寫入一下程式碼

// 用來組態檔的別名，方便路徑的尋找
const path = require('path');//引入path模組
function resolve(dir){
    return path.join(__dirname,dir)//path.join(__dirname)設定絕對路徑
}
module.exports={
    chainWebpack:(config)=>{
        config.resolve.alias
        //set第一個引數：設定的別名，第二個引數：設定的路徑
            .set('@',resolve('./src'))//根據目錄的層級來決定，也可以自行設
            .set('components',resolve('./src/components'))
            .set('views',resolve('./src/views'))
            .set('assets',resolve('./src/assets'))
    }
}