背景
- 基於Vue-cli 專案產品部署，涉及到的互動的地址等配置資訊，每次都要重新打包才能生效，極大的降低了效率。我們的目的是讓專案實施的小夥伴重新快樂起來。網上實現的方式，都是半自動化的，還需要重新修改。
需求點
- 配置化：打包後的配置檔案可二次修改
- 配置自動生成：vue-cli 提供了各種環境的打包，要實現相關配置檔案的自動打包
- 研發人員無痛感：對於產品研發人員來說，不需要增加額外的打包成本，基於Vue-cli的開發習慣不變。
實現步驟
一：配置自動生成
- 安裝generate-asset-webpack-plugin外掛。用於配置檔案自動生成。
npm install --save-dev generate-asset-webpack-plugin
複製程式碼- 配置webpack.prod.conf.js檔案.新增如下程式碼
// 這段程式碼在配置檔案開頭
var GenerateAssetPlugin = require('generate-asset-webpack-plugin'); //Add:Strony;Date:2018年12月7日
const env = require('../config/' + process.env.env_config + '.env')
// 打包後配置檔案：新增 2018年12月7日;Strony
var createServerConfig = function (compilation) {
//Step1:先複製原物件
var parseEnv = Object.assign({ _hash: compilation.hash}, env)
//Step2:去除配置檔案中的引號
Object.keys(parseEnv).forEach(function (key) {
parseEnv[key] = parseEnv[key].replace(/"/g, "");
});
return JSON.stringify(parseEnv, null, 2);
}
複製程式碼// 這段程式碼加在plugins:[]中
new GenerateAssetPlugin({
filename: utils.assetsPath('../static/serverConfig.json'),
fn: (compilation, cb) => {
cb(null, createServerConfig(compilation));
},
extraFiles: []
})
複製程式碼-
輸入npm run build:prod 打包命令.vue-cli 預設提供了幾個環境的打包環境：早期版本直接：npm run build
-
生成的配置檔案樣式如下：
{
"_hash": "52f44b45b5b600b7f36e",
"NODE_ENV": "production",
"ENV_CONFIG": "sit",
"BASE_API": "http://*****/APIPlateForm/",
"BASE_ADDR": "http://****/",
"REPORT_ADDR": "******"
}
複製程式碼二：全域性變數從配置檔案讀取
-
增加serverConfig.json。目的是開發人員本地開發時候，可以從配置檔案讀取。內容Copy本地的dev.env.js.住裡面的格式為json，去除多餘的引號。
-
在main.js中新增下面的程式碼。目的：讀取配置地址掛載在全域性物件
import axios from 'axios'
/* eslint-disable no-new */
// 請求檔案內容
function getServerConfig() {
return new Promise((resolve, reject) => {
axios.get('./static/serverConfig.json').then(result => {
console.log(result)
const config = result.data;
for (const key in config) {
Vue.prototype[key] = config[key];
}
resolve();
})
})
}
// 請求檔案內容及建立例項
async function main() {
await getServerConfig();
console.log('我的地址是' + Vue.prototype.BASE_API)
axios.defaults.baseURL = Vue.prototype.BASE_API;//axios 的基礎地址從配置檔案讀取
new Vue({
el: '#app',
router,
store,
template: '<App/>',
components: { App }
})
}
// 方法初始執行
main();
複製程式碼3.專案執行：npm run dev。在瀏覽器的控制檯下可以檢視到相關的配置資訊
handleWatchLib(linurl) {
window.open(this.BASE_ADDR + linurl);
return false;
}
複製程式碼