psychic_camera_school/vue.config.js

var CompressionPlugin = require('compression-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
    publicPath: process.env.NODE_ENV === 'production'
        ? '/'
        : '/',
    outputDir: 'dist',
    lintOnSave: false,
    devServer: {
        // public: 'http://10.113.248.92:8080',
        hot: true,
        disableHostCheck: true,
        //     proxy: {
        //         '/api': {
        //             target: 'https://nczc.hnoa.cn/',
        //             ws: true,
        //             changeOrigin: true,
        //             pathRewrite: {
        //                 '^/api': ''
        //             }
        //         }
        //     }
        //  proxy: {
        //     '/api': {
        //         target: 'http://cognitive.wistcm.com:10086/',
        //         ws: true,
        //         changeOrigin: true,
        //         pathRewrite: {
        //             '^/api': ''
        //         }
        //     }
        // }
    },
    productionSourceMap: false,
    configureWebpack: {
        plugins: [
            new CompressionPlugin({
                algorithm: 'gzip', // 使用gzip压缩
                test: /\.js$|\.css$/, // 匹配文件名
                filename: '[path][base].gz', // 压缩后的文件名(保持原文件名，后缀加.gz)
                minRatio: 1, // 压缩率小于1才会压缩
                threshold: 10240, // 对超过10k的数据压缩
                deleteOriginalAssets: false, // 是否删除未压缩的源文件，谨慎设置，如果希望提供非gzip的资源，可不设置或者设置为false（比如删除打包后的gz后还可以加载到原始资源文件）
            }),
        ],
        optimization: {
            // 生产环境移除console和debugger 
            minimizer: [
                new TerserPlugin({
                    terserOptions: {
                        ecma: undefined,
                        warnings: false,
                        parse: {},
                        compress: {
                            drop_console: true,
                            drop_debugger: true,
                            pure_funcs: ['console.log']
                        }
                    },
                }),
            ]
        },
        // css: {
        //     loaderOptions: {
        //         postcss: {
        //             plugins: [
        //                 require('postcss-px-to-viewport')({
        //                     unitToConvert: 'px',   // 需要转换的单位
        //                     viewportWidth: 1920,    // 视口宽度，等同于设计稿宽度
        //                     unitPrecision: 5,      // 精确到小数点后几位
        //                     /**
        //                      * 将会被转换的css属性列表，
        //                      * 设置为 * 表示全部，如：['*']
        //                      * 在属性的前面或后面设置*，如：['*position*']，*position* 表示所有包含 position 的属性，如 background-position-y
        //                      * 设置为 !xx 表示不匹配xx的那些属性，如：['!letter-spacing'] 表示除了letter-spacing 属性之外的其他属性
        //                      * 还可以同时使用 ! 和 * ，如['!font*'] 表示除了font-size、 font-weight ...这些之外属性之外的其他属性名头部是‘font’的属性
        //                      * */
        //                     propList: ['*'],
        //                     viewportUnit: 'vw',    // 需要转换成为的单位
        //                     fontViewportUnit: 'vw',// 需要转换称为的字体单位
        //                     /**
        //                      * 需要忽略的选择器，即这些选择器对应的属性值不做单位转换
        //                      * 设置为字符串，转换器在做转换时会忽略那些选择器中包含该字符串的选择器，如：['body']会匹配到 .body-class，也就意味着.body-class对应的样式设置不会被转换
        //                      * 设置为正则表达式，在做转换前会先校验选择器是否匹配该正则，如果匹配，则不进行转换，如[/^body$/]会匹配到 body 但是不会匹配到 .body
        //                      */
        //                     selectorBlackList: [],
        //                     minPixelValue: 1,      // 最小的像素单位值
        //                     mediaQuery: false,     // 是否转换媒体查询中设置的属性值
        //                     replace: true,         // 替换包含vw的规则，而不是添加回退
        //                     /**
        //                      * 忽略一些文件，如'node_modules'
        //                      * 设置为正则表达式，将会忽略匹配该正则的所有文件
        //                      * 如果设置为数组，那么该数组内的元素都必须是正则表达式
        //                      */
        //                     exclude: [],
        //                     landscape: false,      // 是否自动加入 @media (orientation: landscape)，其中的属性值是通过横屏宽度来转换的
        //                     landscapeUnit: 'vw',   // 横屏单位
        //                     landscapeWidth: 1334   // 横屏宽度
        //                 })
        //             ]
        //         }
        //     }
        // }
    }
}
// // 引入等比适配插件
// const px2rem = require('postcss-px2rem')
 
// // 配置基本大小
// const postcss = px2rem({
//   // 基准大小 baseSize，需要和rem.js中相同
//   remUnit: 16
// })
 
// // 使用等比适配插件
// module.exports = {
//   lintOnSave: true,
//   css: {
//     loaderOptions: {
//       postcss: {
//         plugins: [
//           postcss
//         ]
//       }
//     }
//   }
// }