溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
需求原因
原來的項目中域名是打包到項目里面的，打包后不能動態配置，只能通過不同的指令打包來切換域名，每天都在測試域名和正式域名來回摩擦，后臺大佬說你們可以生成一個配置文件這樣就不用頻繁打包了直接修改配置文件就好，于是就有了這篇文章。
第一步 安裝插件
npm install --save-dev generate-asset-webpack-plugin
第二步 新建配置文件
在項目的根目錄下新建 serverConfig.json 以后會根據這個文件去生成打包的配置文件
{"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());
},
}),
]
第四步 使用配置文件中的內容
這里根據不同項目不同需求代碼自行變換，我分享一下我的項目里的使用，項目中封裝了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獲取，是異步方法，根據情況進行處理。、
好了接下來就再也不用為了域名每天build了
打包后的目錄
總結
以上所述是小編給大家介紹的webpack + vue 打包生成公共配置文件（域名） 方便動態修改,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
