您好,登錄后才能下訂單哦!
需求原因
原來的項(xiàng)目中域名是打包到項(xiàng)目里面的,打包后不能動(dòng)態(tài)配置,只能通過不同的指令打包來切換域名,每天都在測(cè)試域名和正式域名來回摩擦,后臺(tái)大佬說你們可以生成一個(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)行處理。、
好了接下來就再也不用為了域名每天build了
打包后的目錄
總結(jié)
以上所述是小編給大家介紹的webpack + vue 打包生成公共配置文件(域名) 方便動(dòng)態(tài)修改,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)億速云網(wǎng)站的支持!
如果你覺得本文對(duì)你有幫助,歡迎轉(zhuǎn)載,煩請(qǐng)注明出處,謝謝!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。