vue cli3.x創(chuàng)建的項(xiàng)目vue本身已經(jīng)做了些優(yōu)化，如果想在這個(gè)優(yōu)化之上在進(jìn)行優(yōu)化的話我們需要在項(xiàng)目的根目錄新建一個(gè)vue.config.js文件，廢話不多說(shuō)，直接上代碼：

const path = require('path') //路徑
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');  //npm install uglifyjs-webpack-plugin --save-dev
//生產(chǎn)環(huán)境
const isProduction = process.env.NODE_ENV === 'production';
//引入文件的方法
function resolve (dir) {
    return path.join(__dirname, dir)
}
module.exports = {
    //基本路徑
    publicPath: './',
    //輸入文件目錄
    outputDir:"dist",
    lintOnSave:false,
    devServer: {
        compress:false，
        //open:true,
        proxy:{
            './api':{
                  target: 'http:xxx.com.cn', //需要代理服務(wù)器
                   ws:true //websocket,
                   changeOrigin:true,
                   pathRewrite:{
                          './api': '/'
                    }
             }
        }
    },
    //css相關(guān)配置
    css:{
        //是否使用css分離插件
        extract: true,
        //是否開(kāi)啟錯(cuò)誤定位
        sourceMap: false,
        //css預(yù)設(shè)置配置項(xiàng)
        loaderOptions:{
            scss:{
                // 注意：在 sass-loader v7 中，這個(gè)選項(xiàng)名是 "data"
                // 默認(rèn)情況下 `sass` 選項(xiàng)會(huì)同時(shí)對(duì) `sass` 和 `scss` 語(yǔ)法同時(shí)生效
                // 因?yàn)?`scss` 語(yǔ)法在內(nèi)部也是由 sass-loader 處理的
                // 但是在配置 `data` 選項(xiàng)的時(shí)候
                // `scss` 語(yǔ)法會(huì)要求語(yǔ)句結(jié)尾必須有分號(hào)，`sass` 則要求必須沒(méi)有分號(hào)
                prependData:`@import "~@/assets/scss/common.scss";`
            }
        },
        //是否啟用css modules for all css
        modules: false
    },
    chainWebpack: config => {
       //配置別名
       config.resolve.alias
         .set("@",resolve("src"))
         .set("@img",resolve("src/assets/img"))
         .set("@scss",resolve("src/assets/css/common"))
        //生產(chǎn)環(huán)境配置
        if(isProduction){
            //刪除預(yù)加載
            config.plugins.delete('preload');
            config.plugins.delete('prefetch');
            //壓縮代碼 
            config.optimization.minimize(true);
            //分割代碼
            config.optimization.splitChunks({
                chunks: 'all'
            })
        }
    },
    configureWebpack:config=>{
        //為生產(chǎn)環(huán)境配置
        if(isProduction){
            //為生產(chǎn)環(huán)境修改配置
            config.plugins.push(
                new UglifyJsPlugin({
                    uglifyOptions:{
                        compress:{
                            drop_debugger: true,
                            drop_console: true
                        }
                    },
                    //是否生成sourceMap
                    sourceMap: false,
                    //是否多進(jìn)程運(yùn)行提高構(gòu)建效率
                    parallel: true
                })
            )
        }
    },
    //生產(chǎn)環(huán)境是否生成 sourceMap 文件
    productionSourceMap: false,
    //啟用并行化 默認(rèn)并發(fā)運(yùn)行數(shù) os.cpus().length - 1 ,并行化可以顯著加速構(gòu)建
    parallel: require('os').cpus().length > 1
}

基本就是這樣子，大家可以試試！