Vue-CLI(3.X)項目中實現分環境請求API

Vue腳手架升級到3後，生成的項目結構有了一些改變，最近作的一個項目用了新版的腳手架，藉此，記錄一下如何配置實現分環境配置請求不一樣的後端service地址。

1、項目結構

若是你的vue-cli版本仍是老版本，請先卸載原來的版本（npm uninstall vue-cli -g 或 yarn global remove vue-cli），再安裝新版本（npm install -g @vue/cli 或 yarn global add @vue/cli）。

新版本生成的項目結構以下圖
相比之下，少了build和config文件夾，所以配置的方式也不同

2、目的

爲何要把項目進行分環境配置呢？這在實際的項目開發中是頗有必要的，項目上線(production)前須要有一個通過反覆測試的穩定版（verification）本，而開發者須要有另外一個環境(dev)進行開發和自測，這樣纔不會影響到穩定的環境……（這些是我結合本身實際的項目經驗總結出來的，或許你們有不一樣的經歷）因此，在先後端分離的項目裏，前端和後端都要配置不一樣的環境。所以，就有這一篇文章，記錄一下我的的實踐。

3、配置

進入正題，讓咱們參考官方文檔愉快地配置吧~

• package.json文件
  模式是 Vue CLI 項目中一個重要的概念。好比咱們在package.json文件內寫一個這樣的腳本
  若是咱們用命令行'npm run serve'啓動項目，就表示當前項目的模式是'qa'。

• .env.XX
  定義好了模式以後，怎麼把它和項目環境聯繫在一塊兒呢？咱們須要在項目的根目錄下建立名爲.env.[mode]的文本文件，在這裏咱們建立.env.qa文件，那麼當項目啓動時，在這個文件裏聲明過的變量就會在qa模式下被載入。所以，咱們能夠聲明當前模式下的NODE_ENV。注意：只有以 VUE_APP_ 開頭的變量會被 webpack.DefinePlugin 靜態嵌入到客戶端側的包中。除了 VUE_APP_* 變量以外，在你的應用代碼中始終可用的還有兩個特殊的變量：NODE_ENV & BASE_URL。
• NODE_ENV
  咱們能夠經過process.env.NODE_ENV得到到在相應模式下的.env.[mode] 內配置的值；
  在html文件中，參考生成的模板代碼，能夠這樣寫↓

4、驗證

接下來，要驗證咱們用命令「npm run serve」啓動項目，是否能獲取到對應模式下的環境配置，直接上圖好了。

咱們已經配置成功了，接下來調用api就要用到axios或者其餘的工具，按照相應的配置方式進行配置就搞定啦(＾－＾)V