最近被催更了。為了不辜負(fù)僅有的幾個粉絲的期望,我趕緊趁著今天下班早整理一下。
話不多說,直接正題。由于時間緊迫。相信想看這篇文章的小伙伴,也對Vue2和vue-cli2.0有了一定了解。我就直接跳過項目搭建步驟,直接講重點。
下面是vue-cli3.0 的文章的地址以及2.x版本的demo
項目依賴
添加axios 插件
npm install --save axios
然后項目中使用,在main.js中添加下面代碼
import axios from 'axios'
開始關(guān)鍵的步驟
1.在static目錄下添加serverConfig.json文件

serverConfig.json
2.在serverConfig.json文件中添加需要的字段

serverConfig.json
3.在main.js中添加下面的代碼
// 請求文件內(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();
})
})
}
// 請求文件內(nèi)容及創(chuàng)建實例
async function main () {
await getServerConfig();
new Vue({
el: '#app',
router,
template: '<App />',
components: { App }
})
}
// 方法初始執(zhí)行
main();
此時查看瀏覽器控制臺,就得到你想要的了,想做其他操作你就可以隨(為)心(所)所(欲)欲(為)了O(∩_∩)O哈哈~

控制臺
最后關(guān)于打包
直接npm run build 就可以了。因為static文件夾下的一些文件格式已經(jīng)默認(rèn)不被打包。不會出現(xiàn)訪問不到的問題了。
備注
如果再出現(xiàn)訪問不到的話,則需要在webpack.base.conf.js 里面對生產(chǎn)環(huán)境和開發(fā)環(huán)境的路徑進(jìn)行修改即可。