最近被催更了。為了不辜負(fù)僅有的幾個(gè)粉絲的期望，我趕緊趁著今天下班早整理一下。
話不多說(shuō)，直接正題。由于時(shí)間緊迫。相信想看這篇文章的小伙伴，也對(duì)Vue2和vue-cli2.0有了一定了解。我就直接跳過(guò)項(xiàng)目搭建步驟，直接講重點(diǎn)。
下面是vue-cli3.0 的文章的地址以及2.x版本的demo
項(xiàng)目依賴(lài)
添加axios 插件
npm install --save axios
然后項(xiàng)目中使用，在main.js中添加下面代碼
import axios from 'axios'
開(kāi)始關(guān)鍵的步驟
1.在static目錄下添加serverConfig.json文件
serverConfig.json
2.在serverConfig.json文件中添加需要的字段
serverConfig.json
3.在main.js中添加下面的代碼
// 請(qǐng)求文件內(nèi)容
function getServerConfig () {
return new Promise((resolve, reject) => {
axios.get('./static/serverConfig.json').then(result => {
console.log(result)
let config = result.data;
for (let key in config) {
Vue.prototype[key] = config[key];
}
resolve();
})
})
}
// 請(qǐng)求文件內(nèi)容及創(chuàng)建實(shí)例
async function main () {
await getServerConfig();
new Vue({
el: '#app',
router,
template: '<App />',
components: { App }
})
}
// 方法初始執(zhí)行
main();
此時(shí)查看瀏覽器控制臺(tái)，就得到你想要的了，想做其他操作你就可以隨（為）心（所）所（欲）欲（為）了O(∩_∩)O哈哈~
控制臺(tái)
最后關(guān)于打包
直接npm run build 就可以了。因?yàn)?code>static文件夾下的一些文件格式已經(jīng)默認(rèn)不被打包。不會(huì)出現(xiàn)訪問(wèn)不到的問(wèn)題了。
備注
如果再出現(xiàn)訪問(wèn)不到的話，則需要在webpack.base.conf.js 里面對(duì)生產(chǎn)環(huán)境和開(kāi)發(fā)環(huán)境的路徑進(jìn)行修改即可。
