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

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

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

需求原因

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

第一步安裝插件

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

第二步新建配置文件

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

{"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: [
 //打包時生成一個配置文件
 new GenerateAssetPlugin({
  filename: 'serverConfig.json',
  fn: (compilation, cb) => {
   cb(null, createJson());
  },
 }),
]

第四步使用配置文件中的內容

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

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) {
  // 讓每個請求攜帶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ù)情況進行處理。、

好了接下來就再也不用為了域名每天build了

打包后的目錄

總結

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

您可能感興趣的文章:

Vue前端項目部署IIS的實現(xiàn)
這篇文章主要介紹了Vue前端項目部署IIS的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2020-01-01
vue3+vite中使用vuex的具體步驟
在vue3+vite創(chuàng)建的項目中使用vuex，要注意的是vite有部分寫法和之前的webpack是不同的，這篇文章主要介紹了vue3+vite中使用vuex的具體步驟,需要的朋友可以參考下
2022-11-11
如何封裝Vue Element的table表格組件
這篇文章主要介紹了如何封裝Vue Element的table表格組件，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下
2021-02-02
vue單文件組件lint error自動fix與styleLint報錯自動fix詳解
這篇文章主要給大家介紹了關于vue單文件組件lint error自動fix與styleLint報錯自動fix的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2019-01-01
頁面tooltip組件限制工具函數(shù)使用示例詳解
這篇文章主要為大家介紹了頁面tooltip組件的限制工具函數(shù)使用示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
2023-09-09
vue實現(xiàn)分環(huán)境打包步驟(給不同的環(huán)境配置相對應的打包命令)
這篇文章主要介紹了vue實現(xiàn)分環(huán)境打包步驟(給不同的環(huán)境配置相對應的打包命令)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2019-06-06
vue3中實現(xiàn)異步組件的方法實例
前端開發(fā)經常遇到異步的問題,請求函數(shù)、鏈接庫等,下面這篇文章主要給大家介紹了關于vue3中實現(xiàn)異步組件的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
2023-06-06
vscode不支持nvue語法高亮的解決辦法(圖文詳解)
這篇文章主要介紹了vscode不支持nvue語法高亮的解決辦法,用vscode開發(fā)uniapp會遇到用.nvue開發(fā)的時候。但是vscode并沒有提供.nvue的語法高亮，這篇文章給剛用vscode寫.nvue的讀者，需要的朋友可以參考下
2023-02-02
vue require.context全局注冊組件的具體實現(xiàn)
本文主要介紹了vue require.context全局注冊組件,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
2024-05-05
Vue實現(xiàn)計算器計算效果
這篇文章主要為大家詳細介紹了Vue實現(xiàn)計算器計算效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-08-08