Vue不同環境的啟動/打包配置


有時候,開發過程中,項目會有很多環境

dev:本地開發環境
uat:測試/預發布環境
production:正式/生產環境

不同環境下,打包、部署和api的調用都是不同的。
如果每次都頻繁修改代碼,明顯是不理智的,效率也是很低的

使用如下
在package.json新增命令腳本

"scripts": {
"serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "dev": "vue-cli-service serve --mode dev",
    "pre": "vue-cli-service serve --mode pre",
    "production": "vue-cli-service serve --mode production",
    "build:dev": "Vue-cli-service build --mode dev",
    "build:uat": "Vue-cli-service build --mode uat",
    "build:production": "Vue-cli-service build --mode production",
},

在項目根目錄下,增加配置文件

--mode uat意思為指定環境模式為uat,會調用.env.uat文件。默認不指定則為development。所以我們建立多個配置文件

 

 

 如果是本地運行的話配置文件里面的環境得是development 如果只是打包命令的話配置文件是development就OK

 

 

 這些配置文件的變量,是整個項目都可以訪問全局變量

然后如果是使用axios做請求的話設置

axios.defaults.baseURL = process.env.VUE_APP_API
 
接下來就試試吧
 
 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM