最近在做一個vue專案，想通過不同的命令呼叫不同環境的api，防止來回手動修改api出錯。網上看了好多寫的都不全，然后自己突發奇想自己寫一篇文章。
一、先簡單說一下專案搭建
1、安裝vue腳手架
npm install vue-cli -g
2、在硬碟上找一個檔案夾放工程用的，在終端中進入該目錄
cd 目錄路徑
3、根據模板創建專案
vue init webpack 專案名字<專案名字不能用中文>
4、后面就是根據自己的喜好配置，最后一個是否保存自己的喜好設定，我一般不保存，每次根據情況自己去配置
5、安裝依賴
cd 專案目錄
npm install
二、安裝完畢之后打開project.json檔案，配置test（測驗環境指令）
npm run dev 呼叫本地環境
npm run test 呼叫阿里測驗環境api
npm run build 呼叫 生產環境api
這是三種不同環境的指令
三、在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完成
四、在config檔案下建立test.env.js檔案
將prod.env.js內容全部復制到test.env.js檔案里，
分別在dev.env.js,test.env.js,prod.env.js中定義變數API_ROOT，
五、在config檔案夾下配置index.js
增加test配置項，把build配置項的內容全部復制過來即可
六、在main.js檔案里配置baseURL
這樣多配置一種環境，就能實作開發、測驗、生產環境隨便呼叫，再也不用收到去修改了
uj5u.com熱心網友回復：
補充一下：第三步、將build.js的內容全部復制到test.js檔案里之后需要對里邊的內容修改一下
修改前：const webpackConfig = require('./webpack.prod.conf')
修改后：const webpackConfig = require('./webpack.test.conf')
第五步、作用是打包一個區別于“dist”檔案夾的另一個檔案夾，如果沒有需要的話可以省略
uj5u.com熱心網友回復：
解決跨域問題有說明嗎uj5u.com熱心網友回復：
什么說明uj5u.com熱心網友回復：
這樣配置了 跨域通不過uj5u.com熱心網友回復：
感覺把問題復雜化了，如果只是想要不同環境下使用不同的API地址以及其它變數，官方教程有說明怎么弄步驟1：在專案根目錄創建檔案
.env --所有環境生效
.env.development --開發環境優先生效
.env.test --測驗環境優先生效
步驟2: 這3個檔案分都寫入環境變數，例如API地址
.env --內容:VUE_APP_BASEAPI=api/
.env.development --內容:VUE_APP_BASEAPI=http://localhost:5500/api/
.env.test --內容:VUE_APP_BASEAPI=http://測驗服務器:5500/api/
步驟3：在需要用到的地方使用環境變數
例如給axios組件設定全域api地址
axios.defaults.baseURL = process.env.VUE_APP_BASEAPI;
官網教程
https://cli.vuejs.org/zh/guide/mode-and-env.html#%E6%A8%A1%E5%BC%8F
uj5u.com熱心網友回復：
報什么錯？后臺配置了沒轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/32082.html
標籤：JavaScript
上一篇：Adobe Dreamweaver JavaScript
下一篇：經典案例—js控制小球左右運動