vue-cliパッケージプロジェクト後、プロファイルを変更できます

質問:
フロントエンドはバックグラウンドサーバアドレスurlを変更する必要があります.作成したプロファイルはnpm run build後に圧縮され、実行中のフロントエンドサーバに転送された後、フロントエンドでパッケージされたソースコードを見つけ、urlアドレスを見つけて修正する必要があります.パッケージのソースコードを変更しない場合は、npm run buildを再npm run buildし、dist全体をフロントエンドサーバに再転送する必要があります.
ソリューション:
generate-asset-webpack-pluginというプラグインを使って、webpack.prod.conf.jsでconfigServerを生成します.jsonファイルは、build時にjsonファイルを生成させ、axiosを使用してjsonを非同期で取得し、urlを置き換えるだけです.
具体的な手順:第一にgenerate-asset-webpack-pluginプラグインをインストールする

npm install --save-dev generate-asset-webpack-plugin

2つ目はbuild/webpackです.prod.conf.jsの構成
パッケージ時に設定可能なファイル内容を出力させる

var GenerateAssetPlugin = require('generate-asset-webpack-plugin'); 
var createServerConfig = function(compilation){
  let cfgJson={ApiUrl:"http://139.129.31.108:8001"};
  return JSON.stringify(cfgJson);
}

パッケージ化時に設定可能なファイル名を入力とserverconfigという名前が出力.jsonのファイル.

plugins: [
    new GenerateAssetPlugin({
        filename: 'serverconfig.json',
        fn: (compilation, cb) => {
            cb(null, createServerConfig(compilation));
        },
        extraFiles: []
    })
    ......
]

第三に、プロファイルの内容を取得する必要がある場所で以下のコードを作成する.クッキーで保存し、他の場所で入手しやすい.

axios.get("serverconfig.json").then((result)=>{
    Vue.prototype.$cookieStore.setCookie("ApiUrl", result.data.ApiUrl, 30*24*60*60*100);
    console.log(result.data.ApiUrl,'123');
}).catch((error)=>{console.log(error)});

これによりサーバにアップロードするserverconfigをいつでも変更できる.jsonファイルの内容です.
転載先:https://www.cnblogs.com/hibiscus-ben/p/10600457.html