由於項目有外部部署需求，對不同的環境前端調用后台的地址不一樣，且不能提前預知必須到部署現場后才能確定后端地址，故需要將調用后端相關的配置抽離到文件中，打包后部署人員在方便現場修改。
思路如下：
1.由於項目中vue初始化部分有很多網絡請求，所以必須在加載vue的內容之前引入配置，為解決異步請求問題直接在public/index.html的head中引入配置（vue在body后注入）。
2.配置放在js文件中，js文件中將配置對象放到localStorage中。有方法是將配置對象賦值給window頂級對象，感覺這樣不安全，故采用放到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相對路徑為了方便開發環境和生產環境都能調用到。
<head></head>內增加如下一行
<script src="config/dynamicConfig.js"></script> <!-- 讀入抽離的配置 -->
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對應的值，修改后瀏覽器可能會有緩存哦~