快捷導(dǎo)航

vueCli4如何配置vue.config.js文件

更新時(shí)間：2022年03月28日 14:57:22 作者：abner_yang

這篇文章主要介紹了vueCli4如何配置vue.config.js文件，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

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 等靜態(tài)文件目錄
    // lintOnSave: 'error', // 設(shè)置eslint報(bào)錯(cuò)時(shí)停止代碼編譯
    lintOnSave: false,
    productionSourceMap: false, // 不需要生產(chǎn)環(huán)境的 source map（減小dist文件大小，加速構(gòu)建）
    devServer: {
        open: true,  // npm run serve后自動(dòng)打開頁面
        host: '0.0.0.0',  // 匹配本機(jī)IP地址(默認(rèn)是0.0.0.0)
        port: 8989, // 開發(fā)服務(wù)器運(yùn)行端口號(hào)
        proxy: {
            '/api': {
                target: process.env.VUE_APP_BASE_URL, // 代理接口地址
                secure: false,  // 如果是https接口，需要配置這個(gè)參數(shù)
                changeOrigin: true, // 是否跨域
                pathRewrite: {
                    '^/api': ''   //需要rewrite的, 這里理解成以'/api'開頭的接口地址，把/api代替target中的地址
                }
            }
        }
    },
    chainWebpack: (config) => {
        // 移除 prefetch 插件(針對生產(chǎn)環(huán)境首屏請求數(shù)進(jìn)行優(yōu)化)
        config.plugins.delete('prefetch')
        // 移除 preload 插件(針對生產(chǎn)環(huán)境首屏請求數(shù)進(jìn)行優(yōu)化)
        config.plugins.delete('preload')
        // 第1個(gè)參數(shù)：別名，第2個(gè)參數(shù)：路徑  （設(shè)置路徑別名）
        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格式，優(yōu)化加載速度  （參考：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的數(shù)據(jù)進(jìn)行壓縮
                    deleteOriginalAssets: false // 是否刪除原文件 （原文件也建議發(fā)布到服務(wù)器以支持不兼容gzip的瀏覽器）
                })],
                performance: { // 生產(chǎn)環(huán)境構(gòu)建代碼文件超出以下配置大小會(huì)在命令行中顯示警告
                    hints: 'warning',
                    // 入口起點(diǎn)的最大體積 整數(shù)類型（以字節(jié)為單位,默認(rèn)值是：250000 (bytes)）
                    maxEntrypointSize: 5000000,
                    // 生成文件的最大體積 整數(shù)類型（以字節(jié)為單位,默認(rèn)值是：250000 (bytes)）
                    maxAssetSize: 3000000
                    // // 只給出 js 文件的性能提示
                    // assetFilter: function (assetFilename) {
                    //   return assetFilename.endsWith('.js')
                    // }
                }
            }
        }
    }
}

vueCli4配置文件路徑別名及使用

在開發(fā)vue項(xiàng)目中，我們經(jīng)常需要引入不同的文件，這時(shí)就需要針對文件的路徑進(jìn)行設(shè)置，僅僅使用./ .//來進(jìn)行文件的導(dǎo)入，維護(hù)和更改都變的相當(dāng)麻煩，需要對文件的路徑相當(dāng)熟悉才可以

所以可以設(shè)置alias別名來方便操作，然后腳手架cli4中并沒有和cli2一樣自動(dòng)生成一個(gè)webpack.base.config.js文件來讓我們直接寫別名。所以需要我們自行創(chuàng)建，步驟如下：

項(xiàng)目根目錄下創(chuàng)建vue.config.js文件

與package.json 同級目錄

配置文件中寫入一下代碼

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