vue-cli3 vue-config.js配置

　　兩個月前，由於個人之前用的不是圖形化界面的，所以對於許多的配置，變成了，額，怎么這個不能配了，我想要之前webpack可配置的一些插件，於是百度了一番，綜合項目使用了，如下配置，算是對這些東西的一個記錄

const path = require('path')
const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV);
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const CompressionWebpackPlugin = require('compression-webpack-plugin');
const productionGzipExtensions = ['js', 'css']
const BrotliPlugin = require("brotli-webpack-plugin");
const apibaseUrl ="http://a.ab.cn:83/aaaa"
 
function resolve(dir) {
    return path.join(__dirname, dir)
}
module.exports = {
    baseUrl: '/vue_dist/app/',
    devServer: {
        proxy: {
            '/vue_dist/api': {
                target: `${apibaseUrl}/api`,
                pathRewrite: { '^/vue_dist/api': '' },
            },
           
        }
    },
    //生產環境構建文件的目錄
    outputDir:"dist",
    assetsDir:'assets',
    //生產環境是否生成SourceMap
    productionSourceMap: true,
    // 是否使用包含運行時編譯器的 Vue 構建版本
    runtimeCompiler: true,
    parallel: require('os').cpus().length > 1,
    // css相關配置
    css: {
    // 是否使用css分離插件 ExtractTextPlugin
    extract: IS_PROD?true:false,
    // 開啟 CSS source maps?
    sourceMap:IS_PROD?false:true,
    // css預設器配置項
    loaderOptions: {},
    // 啟用 CSS modules for all css / pre-processor files.
    modules: false
    },

    configureWebpack: config => {
        //生產環境去掉console 和 debugger
        //壓縮代碼減少文件體積    
        if (IS_PROD) {  
            const plugins = [];
            plugins.push(
                new UglifyJsPlugin({
                uglifyOptions: {
                    compress: {
                    warnings: false,
                    drop_console: true,
                    drop_debugger: true,//移除debugger
                    pure_funcs: ['console.log']//移除console
                    }
                },
                sourceMap: false,
                parallel: true
                })
            );
            plugins.push(
                new CompressionWebpackPlugin({
                filename: '[path].gz[query]',
                algorithm: 'gzip',
                test: productionGzipExtensions,
                threshold: 10240,
                minRatio: 0.8
                })
            );
            // Zopfli壓縮 https://webpack.js.org/plugins/compression-webpack-plugin/
            /* plugins.push(
            new CompressionWebpackPlugin({
                algorithm(input, compressionOptions, callback) {
                return zopfli.gzip(input, compressionOptions, callback);
                },
                compressionOptions: {
                numiterations: 15
                },
                minRatio: 0.99,
                test: productionGzipExtensions
            })
            );
            plugins.push(
            new BrotliPlugin({
                test: productionGzipExtensions,
                minRatio: 0.99
            })
            );
            config.plugins = [
                ...config.plugins,
                ...plugins
            ]; */
        }
    },
    chainWebpack: config => {
        // 修復HMR
        config.resolve.symlinks(true)
        //配置別名
        config.resolve.alias
            .set("@", resolve('src')) // key,value自行定義，比如.set('@@', resolve('src/components'))
        if (IS_PROD) {
            // 生產環境配置
            
        } else {
            //開發環境配置
        
        }
    }
    
}