vue-cli2.x版本打包修改公用路徑及配置

最近被催更了。為了不辜負(fù)僅有的幾個粉絲的期望,我趕緊趁著今天下班早整理一下。
話不多說,直接正題。由于時間緊迫。相信想看這篇文章的小伙伴,也對Vue2和vue-cli2.0有了一定了解。我就直接跳過項目搭建步驟,直接講重點。

下面是vue-cli3.0 的文章的地址以及2.x版本的demo

vue-cli3.0
vue-cli2.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)行修改即可。

最后的最后如果對你有幫助或者喜歡本文的話,請點個小心加個關(guān)注鼓勵我一下?(°?‵?′??)。持續(xù)關(guān)注我會有小驚喜哦,讓我們一起成長?。。。ㄗⅲ喝缧柁D(zhuǎn)載請注明來源)
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容