vue-cli 3プロファイルを抽出し、パッケージ後の構成を動的に変更

プロジェクトには外部の配置要件があるため、異なる環境のフロントエンドに対してバックグラウンドを呼び出すアドレスが異なり、バックエンドのアドレスを特定するには、配置現場に到着しなければならないことを事前に予知することはできないため、呼び出しバックエンドに関する構成をファイルに抽出し、パッケージ化した後、配置者が現場で修正する必要がある.
考え方は以下の通りである.
　　1.プロジェクトではvue初期化部に多くのネットワークリクエストがあるため、vueのコンテンツをロードする前に構成を導入し、非同期リクエストの問題を解決するためにpublic/indexに直接接続する必要がある.htmlのheadに構成を導入する(vueはbody後に注入する).
　　2.構成はjsファイルに、jsファイルはlocalStorageに構成オブジェクトを配置します.Windowsのトップレベルのオブジェクトに設定オブジェクトを割り当てる方法があり、安全ではないと感じてlocalStorageに配置します.
　　3.構成を使用する必要がある場合は、localStorageを逆シーケンス化し、構成項目を取り出して使用します.
 
操作方法:
　1.publicディレクトリの下にディレクトリconfigを新規作成し、configディレクトリの下にdynamicConfigを新規作成する.jsファイル、内容は以下の通りです

let dynamicConfig = {
  server_url: "http://127.0.0.1"
  //      
}
let jsonStr = JSON.stringify(dynamicConfig)
localStorage.dynamicConfig = jsonStr

　2.publicの下indexを変更します.html,dynamicConfigを導入する.js.config相対パスを使用すると、開発環境と生産環境を容易にするために呼び出されます.
内に次の行を追加します.

　3.Webpackを し、copy-webpack-pluginプラグインを してjsファイルをdist/configディレクトリにパッケージします.
1)プラグインのインストール

npm install -save copy-webpack-plugin

2)vue.config.jsでの

const CopyWebpackPlugin = require("copy-webpack-plugin") //    

module.exports = {
  //...
  configureWebpack: {
    plugins: [
      new CopyWebpackPlugin([ //       
        {
          from: __dirname + "/public/config/dynamicConfig.js",
          to:   __dirname + "/dist/config/dynamicConfig.js"
        }
      ])
    ]
  }
}

　4.jsファイルで を み む

let endpoint = "http://127.0.0.1:8080"
//      js      ，      config/dynamicConfig.js   
if(process.env.NODE_ENV === "developement"){
  endpoint = "XXX" //   
}else{
  if(localStorage.dynamicConfig){ //   dist/config/dynamicConfig.js      
    let config = JSON.parse(localStorage.dynamicConfig)

    if(config.server_url) endpoint = config.server_url
  }
}

　
の :dist/config/dynamicConfigを する.jsでserver_url の は、 にブラウザにキャッシュされる がありますよ~