快捷導(dǎo)航

webpack + vue 打包生成公共配置文件（域名）方便動(dòng)態(tài)修改

更新時(shí)間：2019年08月29日 14:50:56 作者：Q_Qing

這篇文章主要介紹了webpack + vue 打包生成公共配置文件（域名）方便動(dòng)態(tài)修改,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

需求原因

原來(lái)的項(xiàng)目中域名是打包到項(xiàng)目里面的，打包后不能動(dòng)態(tài)配置，只能通過(guò)不同的指令打包來(lái)切換域名，每天都在測(cè)試域名和正式域名來(lái)回摩擦，后臺(tái)大佬說(shuō)你們可以生成一個(gè)配置文件這樣就不用頻繁打包了直接修改配置文件就好，于是就有了這篇文章。

第一步安裝插件

npm install --save-dev generate-asset-webpack-plugin

第二步新建配置文件

在項(xiàng)目的根目錄下新建 serverConfig.json 以后會(huì)根據(jù)這個(gè)文件去生成打包的配置文件

{"ProdUrl":http://text.com}

第三步引入generate-asset-webpack-plugin

在build/webpack.prod.conf.js中添加

 const GenerateAssetPlugin = require('generate-asset-webpack-plugin');
const serverConfig = require('../serverConfig.json')；//引入根目錄下的配置文件
const createJson = function() {
 return JSON.stringify(serverConfig);
};
//plugins 中使用
 plugins: [
 //打包時(shí)生成一個(gè)配置文件
 new GenerateAssetPlugin({
  filename: 'serverConfig.json',
  fn: (compilation, cb) => {
   cb(null, createJson());
  },
 }),
]

第四步使用配置文件中的內(nèi)容

這里根據(jù)不同項(xiàng)目不同需求代碼自行變換，我分享一下我的項(xiàng)目里的使用，項(xiàng)目中封裝了axios，并對(duì)請(qǐng)求攔截做了處理

service.interceptors.request.use(
 async (config) => {
  var baseURL = process.env.BASE_API
  if(process.env.NODE_ENV === "production"){
  await axios.get('serverConfig.json').then( e => {
   baseURL = e.data.ProdUrl
  })
  }
  config.baseURL = baseURL
  if (store.getters.token) {
  // 讓每個(gè)請(qǐng)求攜帶token
  config.headers["X-Token"] = getToken();
  config.headers = {
   "X-Token": getToken(),
   "Content-Type": "application/json-patch+json"
  };
  }
  return config;
 },
 error => {
  // Do something with request error
  console.log(error); // for debug
  Promise.reject(error);
 }
 );

變黃的部分則是獲取配置文件的方法，由于是使用axios獲取，是異步方法，根據(jù)情況進(jìn)行處理。、

好了接下來(lái)就再也不用為了域名每天build了

打包后的目錄

總結(jié)

以上所述是小編給大家介紹的webpack + vue 打包生成公共配置文件（域名）方便動(dòng)態(tài)修改,希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺(jué)得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！

您可能感興趣的文章: