vue項目之配置本地，測試，生產環境，配置axios.defaults.baseURL，解決跨域問題

最近在作一個vue項目，想經過不一樣的命令調用不一樣環境的api，防止來回手動修改api出錯。網上看了好多寫的都不全，而後本身突發奇想本身寫一篇文章。

1、先簡單說一下項目搭建

一、安裝vue腳手架

npm install vue-cli -g

二、在硬盤上找一個文件夾放工程用的，在終端中進入該目錄

cd 目錄路徑

三、根據模板建立項目

vue init webpack 項目名字<項目名字不能用中文>

四、後面就是根據本身的喜愛配置，最後一個是否保存本身的喜愛設置，我通常不保存，每次根據狀況本身去配置

五、安裝依賴

cd 項目目錄
npm install

2、安裝完畢以後打開project.json文件，配置test（測試環境指令）

npm run dev 調用本地環境
npm run test 調用阿里測試環境api
npm run build 調用 生產環境api

這是三種不一樣環境的指令

3、在build文件夾下創建test.js、webpack.test.conf.js文件

將build.js的內容所有複製到test.js文件裏，test.js完成

將webpack.prod.conf.js的內容複製到webpack.test.conf.js文件裏，
而後修改webpack.test.conf.js文件；
將const env = require('../config/prod.env')；
修改成const env = require('../config/test.env')；
webpack.test.conf.js完成

4、在config文件下創建test.env.js文件

將prod.env.js內容所有複製到test.env.js文件裏，
分別在dev.env.js,test.env.js,prod.env.js中定義變量API_ROOT，

5、在config文件夾下配置index.js

增長test配置項，把build配置項的內容所有複製過來便可

6、在main.js文件裏配置baseURL

這樣多配置一種環境，就能實現開發、測試、生產環境隨便調用，不再用手動去修改了