場景描述：? ?
? ? ? ? 由于開發(fā)環(huán)境、測試環(huán)境、生產環(huán)境三者是放在不同的服務器導致請求的接口URL地址不同，所有需要配置根據(jù)不同的環(huán)境使用不同的服務器地址。
解決問題：
請先簡單閱讀一下官方文檔，了解一下概念
1、根目錄創(chuàng)建.env.development、.env.test、.env.production文件(開發(fā)、測試、生產)
?文章來源地址http://www.zghlxwxcb.cn/news/detail-727089.html
2、文件內容及字段說明
-
NODE_ENV:可以設置為其他值，比如"test",但是打包后的目錄結構和"production"不一樣，所以還是設置為"production",通過"VUE_APP_MODE"變量來區(qū)分環(huán)境 -
VUE_APP_MODE:線上測試環(huán)境 -
VUE_APP_API_URL:api調用地址 -
outputDir:打包生成的文件夾名稱，默認是'dist'
2.1.?.env.development內容
NODE_ENV = 'development'
VUE_APP_MODE = 'development'
VUE_APP_API_URL = 'http://192.168.1.33:8008/api/'2.2.?.env.test內容
NODE_ENV = 'production'
VUE_APP_MODE = 'test'
VUE_APP_API_URL = 'http://xxx.xxx.xxx.xx:8008/api/'
outputDir = test2.3.?.env.production內容
NODE_ENV = 'production'
VUE_APP_MODE = 'production'
VUE_APP_API_URL = 'http://xxx.xxx.xxx.xx:8008/api/'3、修改vue.config.js中的打包輸入目錄
?4、修改package.json文件
?
"test": "vue-cli-service build --mode test",//打包測試環(huán)境
"publish": "vue-cli-service build && vue-cli-service build --mode test",//測試和生產一起打包
5、修改我們自己的支付接口文件
?
6、打包
運行npm run test或者npm run publish
?test是測試環(huán)境的，dist是生產環(huán)境的。
7、其他說明
再次說明一下為什么是用process.env.VUE_APP_MODE來判斷，而不是用process.env.NODE_ENV，如果我們在.env.test文件中把NODE_ENV設置為test的話，那么打包出來的目錄結構是有差異的，差異如下圖
文章來源：http://www.zghlxwxcb.cn/news/detail-727089.html
?
到了這里，關于做法一: vue-cli(webpack)配置開發(fā)環(huán)境、測試環(huán)境、生產環(huán)境的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
