vue-cli3 webpack配置多环境打包，解决浏览器缓存

问题1：当时遇到本地，测试服，线上不同的配置，然后一直改代码。就很坑。于是想到多环境打包。

问题2：每次上线后，都有以前的缓存，导致页面不能更新，都需要通知使用者强刷。但是这种方法使用感太差了。

【webpack打包文件加上版本号和时间戳】：

const webpack = require('webpack');
const path = require('path');
const Timestamp = new Date().getTime();
module.exports = {
    publicPath:'/v2',
    productionSourceMap: false,
    lintOnSave: false,
    css: {
        loaderOptions: {
            sass: {
                prependData: `@import "~@/assets/css/color.scss";`,
            },
        }
    },
    configureWebpack:{
        output: { // 输出重构  打包编译后的 文件名称  【模块名称.版本号.时间戳】
            filename: `[name].${process.env.VUE_APP_Version}.${Timestamp}.js`,
            chunkFilename: `[name].${process.env.VUE_APP_Version}.${Timestamp}.js`
        },
    },
   
    devServer: {
        proxy: {
            '/api': {
                target: 'http://192.168.0.133:8080/',
                ws: true,
                changeOrigin: true,
                pathRewrite: {
                    '^/api': '/' //通过pathRewrite重写地址，将前缀/api转为/
                }
            }
        },
    },
    configureWebpack: {
        plugins: [
            new webpack.ProvidePlugin({
                $: "jquery",
                jQuery: "jquery",
                "windows.jQuery": "jquery"
            })
        ]
    }
};

【配置多环境】

在根目录创建.env.production作为正式环境的配置。创建.env.test作为测试环境的配置。

.env.test配置如图

NODE_ENV = 'test'
VUE_APP_Version = '1.0'

然后配置package.json

"scripts": {
    "serve": "vue-cli-service serve",//本地环境
    "test": "vue-cli-service serve --mode test",  // 本地启动测试环境
    "build": "vue-cli-service build",//打包正式环境
    "test-build": "vue-cli-service --mode test",//打包测试环境
    "lint": "vue-cli-service lint"
  },

此时环境已经处理好了。npm run serve是默认的development开发环境。

// baseUrl环境变量
let baseUrl = '';
console.log('env=',process.env.NODE_ENV);
if (process.env.NODE_ENV === 'development'){ // 本地环境
    baseUrl = 'http://192.168.0.127:8082';
} else if (process.env.NODE_ENV === 'test'){ // 测试环境
    baseUrl = 'http://cmp.datacastle.cn';
} else if (process.env.NODE_ENV === 'production') { // 开发环境
    baseUrl = 'https://www.dcjingsai.com';
}
Vue.prototype.baseUrl= baseUrl;

至此，多环境打包就完成啦！

vue-cli3 webpack配置多环境打包，解决浏览器缓存

猜你喜欢