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 runserveはデフォルトの開発環境です。

// 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;

この時点で、マルチ環境パッケージが完成しました。