[JavaScript知识库]Vuecli 4.0 vue.config.js 相关配置

```javascript
/*
 * @Time: 2021-08-30 22:55:56
 */
const CompressionPlugin = require('compression-webpack-plugin'); //引入compression-webpack-plugin
// const PRODorTest= ['production', 'test'].includes(process.env.NODE_ENV)  // 判断环境   生产 -测试   
const PROD = process.env.NODE_ENV === 'production'; //生产环境    
//  在  .env.development  配置   
// process.env.VUE_APP_BASE_ROLE   
//  process.env.VUE_APP_BASE_URL
if (PROD) {console.log(`${process.env.VUE_APP_BASE_ROLE } ---- ${ new Date().toLocaleString()}`) }//  获取vue 版本 及打包编译时间
    //   修改 文件别名
const path = require("path"); //  node中文件 路径 组件
const resolve = dir => path.join(__dirname, dir); //  将绝对路径修改为相对路径 
const url = process.env.VUE_APP_BASE_URL; //   (自定义开发环境变量) 获取 开发环境的ip (即url 路径)
module.exports = {
    publicPath: './',
    //去除生产环境的productionSourceMap
    productionSourceMap: false,
    devServer: {
        open: false, //编译后默认打开浏览器
        host: '0.0.0.0', //域名
        port: 8080, // 端口
        https: false, //是否https
        // 配置 同步至浏览器显示警告和错误
        overlay: {
            warnings: false,
            errors: true
        },
        proxy: { // 代理服务路径
            '/api': {
                target: url, // 目标路径
                changeOrigin: true, //是否跨域
                // ws: false, //是否支持websocket   默认 为true
                secure: false, //如果是https接口，需要配置这个参数
                pathRewrite: { // 发送请求时，请求路径重写：将 以/api --> 为 '' （即去掉/api）
                    '^/api': ''
                }
            }
        }
    },
    chainWebpack: (config) => {
        /* 添加分析工具  ehcharts 视图    首屏加载优化工具 */
        if (PROD) { //生产环境
            if (process.env.npm_config_report) { //  判断是否npm安装
                config
                    .plugin('webpack-bundle-analyzer')
                    .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
                    .end();
                config.plugins.delete('prefetch')
            }
        }
        //移除 prefetch 插件(针对生产环境首屏请求数进行优化)
        config.plugins.delete('prefetch')
            // 移除 preload 插件(针对生产环境首屏请求数进行优化)
        config.plugins.delete('preload')
            // 第1个参数：别名，第2个参数：路径  （设置路径别名）  ----->  修改文件名称
        config.resolve.alias
            .set("@", resolve("src"))
            .set("@assets", resolve("src/assets"))
            // .set("@components", resolve("src/components"))
            // .set("@views", resolve("src/views"))
            // .set("@router", resolve("src/router"))
            // .set("@store", resolve("src/store"));
    },
    configureWebpack: (config) => {
        //打包时对js/css文件进行压缩    需要后端配合服务器设置 nginx配置
        // 服务器支持gzip的方式可以有两种：
        // 1、 打包的时候生成对应的.gz文件， 浏览器请求xx.js时， 服务器返回对应的xxx.js.gz文件
        // 2、 浏览器请求xx.js时， 服务器对xx.js进行gzip压缩后传输给浏览器
        if (PROD) { //生产环境
            config.plugins.push(
                new CompressionPlugin({
                    /* [file]被替换为原始资产文件名。
                       [path]替换为原始资产的路径。
                       [dir]替换为原始资产的目录。
                       [name]被替换为原始资产的文件名。
                       [ext]替换为原始资产的扩展名。
                       [query]被查询替换。*/
                    filename: '[path].gz[query]',
                    algorithm: 'gzip', //压缩算法
                    test: /\.js$|\.css$|\.html$/, //匹配文件
                    threshold: 10240, //压缩超过此大小的文件,以字节为单位
                    minRatio: 0.8, //只有压缩率小于这个值的资源才会被处理
                    deleteOriginalAssets: false //删除原始文件只保留压缩后的文件
                })
            )
        }
    },
    css: {
        // css预设器配置项
        loaderOptions: {
            postcss: {
                plugins: [
                    // 把px单位换算成rem单位
                    require("postcss-pxtorem")({
                        rootValue: 75, // 换算的基数(设计图750的根字体为32)
                        selectorBlackList: [".van"], // 要忽略的选择器并保留为px。  引入vant 组件源码 配置  
                        propList: ["*"], //可以从px更改为rem的属性。
                        minPixelValue: 2 // 设置要替换的最小像素值。
                    })
                ]
            }
        },
        // sourceMap: false, // 开启 CSS source maps?
        extract: PROD, //生产 环境  为true  -- 是否使用css分离插件 ExtractTextPlugin
    }
}