SmartCommunity/operationSupport/vue.config.js

/*
 * @Author: zouwenying
 * @Date: 2020-10-21 18:14:35
 * @LastEditTime: 2021-04-27 17:28:49
 * @LastEditors: zwy
 * @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: process.env.NODE_ENV === 'sit' ? '/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
        }
    }
};