CZC/commandCenter/vue.config.js

const path = require('path');
const envConfig = require('./src/config');
function resolve(dir) {
    return path.join(__dirname, dir); // path.join(__dirname)设置绝对路径
}

const proxyAgent = {
    target: envConfig.baseApi,
    ws: true, // 代理的WebSockets
    changeOrigin: true, // 允许websockets跨域
    logLevel: 'debug',
    pathRewrite: {}
};
module.exports = {
    publicPath: '/czc-commandCenter',
    productionSourceMap: false,
    filenameHashing: false,
    chainWebpack: (config) => {
        // 配置别名
        config.resolve.alias
            .set('@', resolve('src'))
            .set('@assets', resolve('src/assets'))
            .set('@views', resolve('src/views'))
            .set('@components', resolve('src/components'))
            .set('@utils', resolve('src/utils'));
        // 配置style px->vm
        config.module
            .rule('vue')
            .test(/\.vue$/)
            .use('style-vw-loader')
            .loader('style-vw-loader')
            .options({
                viewportWidth: 1920 //传参
            });

        // // // 配置每次打包浏览器缓存文件名的随机性
        // const filename = path.posix.join('js', `${new Date().getTime()}_[name].js`);
        // config.mode('production').devtool(false).output.filename(filename).chunkFilename(filename);
    },
    // 配置全局样式变量
    css: {
        loaderOptions: {
            postcss: {
                plugins: [
                    require('postcss-pxtorem')({
                        rootValue: 100, // 换算的基数
                        selectorBlackList: ['weui', 'mu'], // 忽略转换正则匹配项
                        propList: ['*']
                    })
                ]
            }
        }
        // extract: {
        //     // 打包后css文件名称添加时间戳
        //     filename: `css/[name].${new Date().getTime()}.css`,
        //     chunkFilename: `css/chunk.[id].${new Date().getTime()}.css`
        // }
    },
    devServer: {
        host: '0.0.0.0', // can be overwritten by process.env.HOST
        port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
        https: false, // https:{type:Boolean}
        open: false, // 配置自动启动浏览器  open: 'Google Chrome'-默认启动谷歌
        // 配置多个代理
        proxy: {
            '/czc-user-auth': {
                target: envConfig.baseApi,
                ws: true, // 代理的WebSockets
                changeOrigin: true, // 允许websockets跨域
                pathRewrite: {
                    //  "^/czc-user-auth": ""
                }
            },
            '/czc-user-center': {
                target: envConfig.baseApi,
                ws: true, // 代理的WebSockets
                changeOrigin: true, // 允许websockets跨域
                logLevel: 'debug',
                pathRewrite: {
                    //  "^/czc-user-center": ""
                }
            },
            '/czc-community': {
                target: envConfig.baseApi,
                ws: true, // 代理的WebSockets
                changeOrigin: true, // 允许websockets跨域
                logLevel: 'debug',
                pathRewrite: {
                    // "^/czc-community": ""
                }
            },
            '/czc-message': {
                target: envConfig.baseApi,
                ws: true, // 代理的WebSockets
                changeOrigin: true, // 允许websockets跨域
                logLevel: 'debug',
                pathRewrite: {
                    // "^/czc-message": ""
                }
            },
            '/czc-charge': {
                target: envConfig.baseApi,
                ws: true, // 代理的WebSockets
                changeOrigin: true, // 允许websockets跨域
                logLevel: 'debug',
                pathRewrite: {
                    // "^/czc-charge": ""
                }
            },
            '/operation-manager': {
                target: envConfig.baseApi,
                ws: true, // 代理的WebSockets
                changeOrigin: true, // 允许websockets跨域
                logLevel: 'debug',
                pathRewrite: {
                    // "^/operation-manager": ""
                }
            },
            '/czc-energy': {
                target: envConfig.baseApi,
                ws: true, // 代理的WebSockets
                changeOrigin: true, // 允许websockets跨域
                logLevel: 'debug',
                pathRewrite: {
                    // "^/zoniot-water": ""
                }
            },
            '/card': {
                target: envConfig.readCard,
                ws: true, // 代理的WebSockets
                changeOrigin: true, // 允许websockets跨域
                logLevel: 'debug',
                pathRewrite: {
                    // '^/card': ""
                }
            },
            '/czc-gate-web': proxyAgent
        },
        overlay: {
            warnings: false,
            errors: false
        }
    },
    pluginOptions: {
        'postcss-import': {},
        'postcss-url': {},
        'postcss-aspect-ratio-mini': {},
        'postcss-write-svg': {
            utf8: false
        },
        'postcss-cssnext': {},
        'postcss-px-to-viewport': {
            viewportWidth: 1920, //  视窗的宽度，对应的是我们设计稿的宽度，移动端一般是750，如果是pc端那就是类似1920这样的尺寸
            viewportHeight: 1080, // 视窗的高度，移动端一般指定1334，也可以不配置
            unitPrecision: 3, // 指定`px`转换为视窗单位值的小数位数（很多时候无法整除）
            viewportUnit: 'vw', // 指定需要转换成的视窗单位，建议使用vw
            //   selectorBlackList: ['.ignore', '.hairlines'],  // 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名
            minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值
            mediaQuery: false // 允许在媒体查询中转换`px`
        },
        'postcss-viewport-units': {},
        cssnano: {
            preset: 'default', // 设置成default将不会启用autoprefixer
            'postcss-zindex': false
        }
    },
    lintOnSave: false
};