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

安裝

如果安裝了1.x 或者 2.x 的話，可以先通過下面的命令行進行卸載

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)建項目

vue create hello-world

項目創(chuàng)建

默認(rèn)選著第一個，回車確認(rèn)，就會自動加載相應(yīng)的依賴文件

加載完成

完成后執(zhí)行即可啟動項目

啟動項目

cd hello-world
npm run serve

啟動成功后cli3.0提供了兩種訪問方式，一種本地localhost訪問；一種是本機IP訪問，我一般都是使用后者

訪問方式

主頁面

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

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

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

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

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

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

為了實現(xiàn)異步請求，我們加載axios

npm install axios --save

axios加載成功

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

訪問文件步驟

引入axios

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

import axios from 'axios'

紅線是因為，改對應(yīng)引入但未被引用

寫請求方法

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

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

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

執(zhí)行方法

init()

這個時候你要是看控制臺，你就會發(fā)現(xiàn)得到你想要的結(jié)果

image.png

項目中的引用

為了可以全局的使用axios，我們把他注冊到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

此時再看控制臺，發(fā)現(xiàn)這個請求報紅，看路徑就是我們要的請求，這就說明我們方法已經(jīng)通了。

控制臺

Network

這回可以確認(rèn)無誤就是我們想要的請求路徑了。

最后執(zhí)行打包

npm run build

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

生成的dist文件

修改圖中的serverConfig.json文件里面的路徑就可以達到不需要再次打包就可以修改訪問路徑的工能，利用好，可以解決很多需要外部修改的屬性。這篇文章僅為大家提供思路，實際在項目中會有很多優(yōu)化，根據(jù)各個項目的需求，為了代碼工整，可以將getServerConfig方法提出，放在一個公用類（方法）。

說明

有的人會有疑問，當(dāng)打包之后有的時候訪問不到。這個時候需要看吧文件哪里。確定路徑后可以修改的是在原項目目錄下添加vue.config.js文件，這個文件存在的話，腳手架會自動加載并解析里面的配置。

添加vue.config.js文件

image.png

更新

1、如果對你有幫助的話，記得給個贊賞加關(guān)注，鼓勵一下。