•配置化：打包后的配置文件可二次修改
•配置自動(dòng)生成：vue-cli 提供了各種環(huán)境的打包，要實(shí)現(xiàn)相關(guān)配置文件的自動(dòng)打包
•研發(fā)人員無痛感：對(duì)于產(chǎn)品研發(fā)人員來說，不需要增加額外的打包成本，基于Vue-cli的開發(fā)習(xí)慣不變。

實(shí)現(xiàn)步驟

一：配置自動(dòng)生成

•安裝generate-asset-webpack-plugin插件。用于配置文件自動(dòng)生成。

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ù)制原對(duì)象
 var parseEnv = Object.assign({ _hash: compilation.hash}, env)
 //Step2:去除配置文件中的引號(hào)
 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)提供了幾個(gè)環(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ā)時(shí)候，可以從配置文件讀取。內(nèi)容Copy本地的dev.env.js.住里面的格式為json，去除多余的引號(hào)。

2.在main.js中添加下面的代碼。目的：讀取配置地址掛載在全局對(duì)象

import axios from 'axios'
/* eslint-disable no-new */
// 請(qǐng)求文件內(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();
  })
 })
}
// 請(qǐng)求文件內(nèi)容及創(chuàng)建實(shí)例
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.項(xiàng)目執(zhí)行：npm run dev。在瀏覽器的控制臺(tái)下可以查看到相關(guān)的配置信息

4.使用方法：在vue文件中，直接訪問使用各類地址信息。

  handleWatchLib(linurl) {
    window.open(this.BASE_ADDR + linurl);
    return false;
   }

總結(jié)

以上所述是小編給大家介紹的基于Vue-Cli 打包自動(dòng)生成/抽離相關(guān)配置文件的實(shí)現(xiàn)方法，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: