Vue-Cli如何打包自動生成/抽離相關(guān)配置文件

小編給大家分享一下Vue-Cli如何打包自動生成/抽離相關(guān)配置文件，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

創(chuàng)新互聯(lián)建站專注于武岡企業(yè)網(wǎng)站建設(shè),響應(yīng)式網(wǎng)站設(shè)計,商城開發(fā)。武岡網(wǎng)站建設(shè)公司,為武岡等地區(qū)提供建站服務(wù)。全流程按需求定制網(wǎng)站，專業(yè)設(shè)計，全程項(xiàng)目跟蹤，創(chuàng)新互聯(lián)建站專業(yè)和態(tài)度為您提供的服務(wù)

背景

?基于Vue-cli 項(xiàng)目產(chǎn)品部署，涉及到的交互的地址等配置信息，每次都要重新打包才能生效，極大的降低了效率。我們的目的是讓項(xiàng)目實(shí)施的小伙伴重新快樂起來。網(wǎng)上實(shí)現(xiàn)的方式，都是半自動化的，還需要重新修改。

需求點(diǎn)

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

實(shí)現(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)建實(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。在瀏覽器的控制臺下可以查看到相關(guān)的配置信息

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

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

以上是“Vue-Cli如何打包自動生成/抽離相關(guān)配置文件”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

分享題目：Vue-Cli如何打包自動生成/抽離相關(guān)配置文件
網(wǎng)站網(wǎng)址：http://muchs.cn/article28/ipigcp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站改版、響應(yīng)式網(wǎng)站、手機(jī)網(wǎng)站建設(shè)、靜態(tài)網(wǎng)站、網(wǎng)站內(nèi)鏈、網(wǎng)頁設(shè)計公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)