基于Vue-Cli 打包自動生成/抽離相關(guān)配置文件的實現(xiàn)方法
背景
•基于Vue-cli 項目產(chǎn)品部署，涉及到的交互的地址等配置信息，每次都要重新打包才能生效，極大的降低了效率。我們的目的是讓項目實施的小伙伴重新快樂起來。網(wǎng)上實現(xiàn)的方式，都是半自動化的，還需要重新修改。
需求點(diǎn)
•配置化：打包后的配置文件可二次修改
•配置自動生成：vue-cli 提供了各種環(huán)境的打包，要實現(xiàn)相關(guān)配置文件的自動打包
•研發(fā)人員無痛感：對于產(chǎn)品研發(fā)人員來說，不需要增加額外的打包成本，基于Vue-cli的開發(fā)習(xí)慣不變。
實現(xiàn)步驟
一：配置自動生成
•安裝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:先復(fù)制原對象
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 默認(rèn)提供了幾個環(huán)境的打包環(huán)境：早期版本直接：npm run build
結(jié)果如下：
•生成的配置文件樣式如下：
{
"_hash": "52f44b45b5b600b7f36e",
"NODE_ENV": "production",
"ENV_CONFIG": "sit",
"BASE_API": "http://*****/APIPlateForm/",
"BASE_ADDR": "http://****/",
"REPORT_ADDR": "******"
}
二：全局變量從配置文件讀取
1.增加serverConfig.json。目的是開發(fā)人員本地開發(fā)時候，可以從配置文件讀取。內(nèi)容Copy本地的dev.env.js.住里面的格式為json，去除多余的引號。
2.在main.js中添加下面的代碼。目的：讀取配置地址掛載在全局對象
import axios from 'axios'
/* eslint-disable no-new */
// 請求文件內(nèi)容
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();
})
})
}
// 請求文件內(nèi)容及創(chuàng)建實例
async function main() {
await getServerConfig();
console.log('我的地址是' + Vue.prototype.BASE_API)
axios.defaults.baseURL = Vue.prototype.BASE_API;//axios 的基礎(chǔ)地址從配置文件讀取
new Vue({
el: '#app',
router,
store,
template: '<App/>',
components: { App }
})
}
// 方法初始執(zhí)行
main();
3.項目執(zhí)行：npm run dev。在瀏覽器的控制臺下可以查看到相關(guān)的配置信息
4.使用方法：在vue文件中，直接訪問使用各類地址信息。
handleWatchLib(linurl) {
window.open(this.BASE_ADDR + linurl);
return false;
}
總結(jié)
以上所述是小編給大家介紹的基于Vue-Cli 打包自動生成/抽離相關(guān)配置文件的實現(xiàn)方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
Element?Plus的el-tree-select組件懶加載+數(shù)據(jù)回顯詳解
el-tree-select組件是el-tree和el-select的結(jié)合體,他們的原始屬性未被更改,下面這篇文章主要給大家介紹了關(guān)于Element?Plus的el-tree-select組件懶加載+數(shù)據(jù)回顯的相關(guān)資料,需要的朋友可以參考下2022-11-11
這篇文章主要介紹了Vue-Cli項目優(yōu)化操作,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
Vue3使用hook封裝媒體查詢和事件監(jiān)聽的代碼示例
這篇文章主要給大家詳細(xì)介紹Vue3如何使用hook封裝媒體查詢和事件監(jiān)聽，使得Vue的開發(fā)更加絲滑，文中通過代碼示例給大家介紹的非常詳細(xì)，感興趣的同學(xué)跟著小編一起來學(xué)習(xí)吧2023-07-07
本篇文章主要介紹了nginx部署訪問vue-cli搭建的項目的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-02-02
本篇文章主要介紹了詳解Vue-cli 創(chuàng)建的項目如何跨域請求 ，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-05-05
這篇文章主要介紹了使用vue如何構(gòu)建一個自動建站項目，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-02-02
這篇文章主要為大家詳細(xì)介紹了Vue3中ref和reactive函數(shù)的使用教程，文中的示例代碼講解詳細(xì)，對我們學(xué)習(xí)Vue有一定的幫助，需要的可以參考一下2022-07-07
這篇文章主要為大家詳細(xì)介紹了vue版日歷組件的實現(xiàn)方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
為了防止有人惡意使用腳本進(jìn)行批量操作,會設(shè)置圖片滑動驗證，本文就介紹了Vue.js圖片滑動驗證的實現(xiàn)示例，感興趣的可以了解一下2023-05-05
這篇文章主要介紹了vue前端如何向后端傳遞參數(shù)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06