對(duì)應(yīng)完2.x版本的，就直接把這個(gè)3.0的也對(duì)應(yīng)，相對(duì)于2.0來(lái)說(shuō)谅辣，vue-cli3.0更讓我們專(zhuān)注了開(kāi)發(fā)，不需要去關(guān)注太多的文件配置婶恼。
如下進(jìn)行一下講解順便簡(jiǎn)單講一下cli3.0的使用吧
詳細(xì)的話(huà)就看一下教程吧就桑阶，我相信你們是最聰明的 ( * ^ ▽ ^ *) 傳送門(mén)。
demo下載地址

安裝

如果安裝了1.x 或者 2.x 的話(huà)勾邦，可以先通過(guò)下面的命令行進(jìn)行卸載

npm uninstall vue-cli -g 或 yarn global remove vue-cli

安裝3.0

npm install -g @vue/cli
# OR
yarn global add @vue/cli

查看版本

vue --version

我的版本

版本查看

創(chuàng)建項(xiàng)目

vue create hello-world

項(xiàng)目創(chuàng)建

默認(rèn)選著第一個(gè)蚣录，回車(chē)確認(rèn)，就會(huì)自動(dòng)加載相應(yīng)的依賴(lài)文件

加載完成

完成后執(zhí)行即可啟動(dòng)項(xiàng)目

啟動(dòng)項(xiàng)目

cd hello-world
npm run serve

啟動(dòng)成功后cli3.0提供了兩種訪問(wèn)方式眷篇，一種本地localhost訪問(wèn)萎河；一種是本機(jī)IP訪問(wèn)，我一般都是使用后者

訪問(wèn)方式

主頁(yè)面

剩下的工作我就在VSCode里面打開(kāi)了蕉饼，方便大家查看目錄結(jié)構(gòu)

生成的目錄機(jī)構(gòu)

這里面的src目錄就是開(kāi)發(fā)目錄虐杯，代碼都是在此目錄下開(kāi)發(fā)；public目錄就是存放那些不需要打包的文件椎椰，我們的那個(gè)公共路徑的文件就是放在這個(gè)目錄下厦幅。
新建文件serverConfig.json文件放在public目錄下

添加文件后的目錄結(jié)構(gòu)

文件內(nèi)容寫(xiě)上基本的路徑，或者其他的配置文件參數(shù)等都可慨飘。

serverConfig.json文件內(nèi)容

為了實(shí)現(xiàn)異步請(qǐng)求确憨，我們加載axios

npm install axios --save

axios加載成功

這樣到目前為止所有準(zhǔn)備工作都做好了。

訪問(wèn)文件步驟

引入axios

在src目錄下的main.js文件中添加下面的代碼放在圖片的位置瓤的。

import axios from 'axios'

紅線(xiàn)是因?yàn)樾萜膶?duì)應(yīng)引入但未被引用

寫(xiě)請(qǐng)求方法

function getServerConfig () {
  return new Promise ((resolve, reject) => {
    axios.get('./serverConfig.json').then((result) => {
      console.log(result)  // 看打印出來(lái)的結(jié)果
      let config = result.data;
      for (let key in config) {
        Vue.prototype[key] = config[key];
      }
      console.log(Vue.prototype.baseURL)  // 驗(yàn)證是否已經(jīng)把屬性?huà)煸诹薞ue上
      resolve();
    }).catch((error) => {
      console.log(error);
      reject()
    })
  })
}

Vue實(shí)例并加載相應(yīng)配置

ES6語(yǔ)法async/await 將異步變成同步
async function init() {
  await getServerConfig();
  new Vue({
    render: h => h(App),
  }).$mount('#app')
}

執(zhí)行方法

init()

這個(gè)時(shí)候你要是看控制臺(tái)，你就會(huì)發(fā)現(xiàn)得到你想要的結(jié)果

image.png

項(xiàng)目中的引用

為了可以全局的使用axios圈膏，我們把他注冊(cè)到Vue的屬性上塔猾。

Vue.prototype.$axios = axios

main.js

在HelloWorld.vue 中添加方法作為使用的例子

getData () {
      this.$axios.get(this.baseURL + '/a/b/c').then((result) => {
        console.log(result);
      }).catch((error) => {
        console.log(result);
      })
    }

然后初始化執(zhí)行

HelloWorld.vue

此時(shí)再看控制臺(tái)，發(fā)現(xiàn)這個(gè)請(qǐng)求報(bào)紅稽坤，看路徑就是我們要的請(qǐng)求丈甸，這就說(shuō)明我們方法已經(jīng)通了。

控制臺(tái)

Network

這回可以確認(rèn)無(wú)誤就是我們想要的請(qǐng)求路徑了睦擂。

最后執(zhí)行打包

npm run build

打包之后會(huì)生成一個(gè)dist文件夾，里面的文件放在服務(wù)器上就可運(yùn)行了

生成的dist文件

修改圖中的serverConfig.json文件里面的路徑就可以達(dá)到不需要再次打包就可以修改訪問(wèn)路徑的工能杖玲，利用好顿仇，可以解決很多需要外部修改的屬性。這篇文章僅為大家提供思路，實(shí)際在項(xiàng)目中會(huì)有很多優(yōu)化臼闻，根據(jù)各個(gè)項(xiàng)目的需求鸿吆，為了代碼工整，可以將getServerConfig方法提出述呐，放在一個(gè)公用類(lèi)（方法）惩淳。

說(shuō)明

有的人會(huì)有疑問(wèn)，當(dāng)打包之后有的時(shí)候訪問(wèn)不到市埋。這個(gè)時(shí)候需要看吧文件哪里黎泣。確定路徑后可以修改的是在原項(xiàng)目目錄下添加vue.config.js文件，這個(gè)文件存在的話(huà)缤谎，腳手架會(huì)自動(dòng)加載并解析里面的配置抒倚。

添加vue.config.js文件

image.png

更新

1拗军、如果對(duì)你有幫助的話(huà)任洞，記得給個(gè)贊賞加關(guān)注，鼓勵(lì)一下发侵。