1沽损、問題初衷
解決問題的初衷巾表，源于vue項(xiàng)目中公共路徑在打包之后一旦遇到整體的路徑更改就需要再次build一下袖外。 如果公司小史隆，項(xiàng)目部署的實(shí)施人員又能隨時(shí)聯(lián)系到開發(fā)人員。直接簡(jiǎn)單的build一下就OK了在刺。又或者開發(fā)人員自己直接就解決一下也行逆害。但是公司一旦大，這期間的溝通蚣驼，聯(lián)絡(luò)等等魄幕，順利的話還行，不順利呢颖杏。也不能讓實(shí)施人員干等著纯陨。 要是實(shí)施人員不用等開發(fā)人員用源碼重新build的話，直接有一個(gè)外部的文件留储，直接修改翼抠。就能解決這期間的問題的話。那將大大的提高效率获讳。
2阴颖、解決方案
第一步：安裝generate-asset-webpack-plugin插件
npm install --save-dev generate-asset-webpack-plugin
第二步：在根目錄下添加serverConfig.json的配置文件
(注：哪些公共的覺得有必要的都可以用jsonde 形式寫在里面）
第三步：在build/webpack.prod.conf.js文件里引入generate-asset-webpack-plugin
const GeneraterAssetPlugin = require('generate-asset-webpack-plugin')
第四步：引入添加的serverConfig.json文件
const serverConfig = require('../serverConfig.json')
第五步：添加打包時(shí)寫入配置文件的代碼
const createJson = function(compilation) {
return JSON.stringify(serverConfig);
};
第六步：添加打包時(shí)輸出配置文件的代碼
new GeneraterAssetPlugin({
filename: 'serverConfig.json',//輸出到dist根目錄下的serverConfig.json文件,名字可以按需改
fn: (compilation, cb) => {
cb(null, createJson(compilation));
}
})
第七步：在main.js中添加讀取build之后的代碼
Vue.prototype.getConfigJson = function () {
Vue.prototype.$axios.get('serverConfig.json').then((result)=>{
console.log(result);
Vue.prototype.baseUrl =result.data.baseUrl;//設(shè)置成Vue的全局屬性
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
}).catch((error)=>{
console.log(error)
})
}
Vue.prototype.getConfigJson()//調(diào)用聲明的全局方法
第八步：項(xiàng)目中引用
this.baseUrl+'/123'
注：
npm run build
項(xiàng)目生成的結(jié)構(gòu)：
其中生成的serverConfig.json
這里面的地址就可以隨意更改了，不再需要再次build
最后希望這篇文章能夠幫助你解決一些問題丐膝。也不枉費(fèi)自己在坑里面替大家鋪路O(∩_∩)O哈哈~量愧，記得關(guān)注+喜歡
更新
很多人搜到的還是這片文章钾菊，所以整理了一下：http://www.reibang.com/p/c085677ae70b 里面包含腳手架cli2.x 和cli3.x
1、如果對(duì)你有幫助的話偎肃，記得給個(gè)贊賞加關(guān)注煞烫，鼓勵(lì)一下。
