vue-cli3之webpack配置

在项目的根目录，新建一个vue.config.js文件：

// vue.config.js
const path = require("path");

const Timestamp = new Date().getTime();

module.exports = {
    configureWebpack: {
        resolve: {
            alias: {
                "@": path.resolve(__dirname, "./src"),
            },
        },
        output: { // 输出重构 打包编译后的 文件名称 【模块名称.版本号.时间戳】
            filename: `[name].${Timestamp}.js`,
            chunkFilename: `[name].${Timestamp}.js`
        },
    },
    css: {
        loaderOptions: {
            sass: {
                // 根据自己样式文件的位置调整
                prependData: `@import "@/assets/css/variables.scss";`, //这里的@是别名
            },
        },
    },

    lintOnSave: false,
    devServer: {
        overlay: { // 让浏览器 overlay 同时显示警告和错误
            warnings: true,
            errors: true
        },
        host: "",
        port: 8080, // 端口号
        https: false, // https:{type:Boolean}
        open: true, //配置后自动启动浏览器
        hotOnly: true, // 热更新
        // proxy: 'http://localhost:8080'   // 配置跨域处理,只有一个代理
        proxy: { //配置多个跨域
            "/": {
                // target: "http://10.18.200.47:8080", // 本地
                // target: "http://10.220.184.106:8080", // 生产
                target: "http://10.220.184.110:8080", // 开发
                changeOrigin: true,
                ws: true, //websocket支持
                secure: false,
                pathRewrite: {
                    "^/": ""
                },
                headers: {
                    // Referer: "http://10.18.200.47:8080", // 本地
                },
            },
        }
    },
}