SmartCommunity/operationSupport/vue.config.js

/*
 * @Author: zouwenying
 * @Date: 2020-10-21 18:14:35
 * @LastEditTime: 2022-10-11 16:35:08
 * @LastEditors: D4THYL3
 * @Description: In User Settings Edit
 * @FilePath: \vue-manage-system-master\vue.config.js
 */
const path = require('path');
const envConfig = require('./src/config');
function resolve(dir) {
    return path.join(__dirname, dir); // path.join(__dirname)设置绝对路径
}

module.exports = {
    publicPath: '/sc-operation',
    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: {
            //     sass: {
            //       data: '@import "@/assets/styles/common/px2rem.scss";@import "@/assets/styles/common/mixins.scss";'
            //     },
            //     postcss: {
            //         plugins: [
            //             require('postcss-pxtorem')({
            //                 rootValue: 100, // 换算的基数
            //                 selectorBlackList: ['weui', 'mu'], // 忽略转换正则匹配项
            //                 propList: ['*']
            //             })
            //         ]
            //     }
            // scss: generateLoaders('sass').concat({
            //     loader: 'sass-resources-loader',
            //     options: {
            //         resources: path.relative(__dirname, '../src/assets/css/punlic-style.scss')
            //     }
            // })
        },
        extract: {
            // 打包后css文件名称添加时间戳
            filename: `css/[name].${new Date().getTime()}.css`,
            chunkFilename: `css/chunk.[id].${new Date().getTime()}.css`
        }
    },
    configureWebpack: {
        externals: {
            vue: 'Vue',
            'vue-router': 'VueRouter',
            vuex: 'Vuex',
            'element-ui': 'ELEMENT',
            axios: 'axios',
            lodash: '_',
            dayjs: 'dayjs',
            echarts: 'echarts'
        }
    },
    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: {
            '/sc-user-auth': {
                target: envConfig.baseApi,
                ws: true, // 代理的WebSockets
                changeOrigin: true, // 允许websockets跨域
                pathRewrite: {
                    //  "^/sc-user-auth": ""
                }
            },
            '/sc-user-center': {
                target: envConfig.baseApi,
                ws: true, // 代理的WebSockets
                changeOrigin: true, // 允许websockets跨域
                logLevel: 'debug',
                pathRewrite: {
                    //  "^/sc-user-center": ""
                }
            },
            '/sc-community': {
                target: envConfig.baseApi,
                ws: true, // 代理的WebSockets
                changeOrigin: true, // 允许websockets跨域
                logLevel: 'debug',
                pathRewrite: {
                    // "^/sc-community": ""
                }
            },
            '/sc-message': {
                target: envConfig.baseApi,
                ws: true, // 代理的WebSockets
                changeOrigin: true, // 允许websockets跨域
                logLevel: 'debug',
                pathRewrite: {
                    // "^/sc-message": ""
                }
            },
            '/sc-charge': {
                target: envConfig.baseApi,
                ws: true, // 代理的WebSockets
                changeOrigin: true, // 允许websockets跨域
                logLevel: 'debug',
                pathRewrite: {
                    // "^/sc-charge": ""
                }
            },
            '/operation-manager': {
                target: envConfig.baseApi,
                ws: true, // 代理的WebSockets
                changeOrigin: true, // 允许websockets跨域
                logLevel: 'debug',
                pathRewrite: {
                    // "^/operation-manager": ""
                }
            },
            '/zoniot-water': {
                target: envConfig.baseApi,
                ws: true, // 代理的WebSockets
                changeOrigin: true, // 允许websockets跨域
                logLevel: 'debug',
                pathRewrite: {
                    // "^/zoniot-water": ""
                }
            }
        }
    },
    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
        }
    }
};