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

我的版本

版本查看

創建項目

vue create hello-world

項目創建

默認選著第一個，回車確認，就會自動加載相應的依賴文件

加載完成

完成后執行即可啟動項目

啟動項目

cd hello-world
npm run serve

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

訪問方式

主頁面

剩下的工作我就在VSCode里面打開了，方便大家查看目錄結構

生成的目錄機構

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

添加文件后的目錄結構

文件內容寫上基本的路徑，或者其他的配置文件參數等都可。

serverConfig.json文件內容

為了實現異步請求，我們加載axios

npm install axios --save

axios加載成功

這樣到目前為止所有準備工作都做好了。

訪問文件步驟

引入axios

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

import axios from 'axios'

紅線是因為，改對應引入但未被引用

寫請求方法

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

Vue實例并加載相應配置

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

執行方法

init()

這個時候你要是看控制臺，你就會發現得到你想要的結果

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);
      })
    }

然后初始化執行

HelloWorld.vue

此時再看控制臺，發現這個請求報紅，看路徑就是我們要的請求，這就說明我們方法已經通了。

控制臺

Network

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

最后執行打包

npm run build

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

生成的dist文件

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

說明

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

添加vue.config.js文件

image.png

更新

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