Vue配置環(huán)境變量的正確打開方式
更新時間：2022年01月07日 15:22:25 作者：0.活在風浪里
這篇文章主要為大家介紹了Vue配置環(huán)境變量，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
第一 配置package.json
package.json 里的 scripts 配置 serve test build，通過 --mode xxx 來執(zhí)行不同環(huán)境 通過 npm run serve 啟動本地 , 執(zhí)行 development 通過 npm run test 打包測試 , 執(zhí)行 testing 通過 npm run build 打包正式 , 執(zhí)行 production
"scripts": {
"serve": "vue-cli-service serve --open",
"test": "vue-cli-service build --mode testing",
"build": "vue-cli-service build",
}第二 配置介紹 簡單說明 看詳情點擊上面tps
以 VUE_APP_ 開頭的變量，在代碼中可以通過 process.env.VUE_APP_ 訪問。
比如,VUE_APP_MY_NAME = '活在風浪' 通過process.env.VUE_APP_MY_NAME 訪問。
除了 VUE_APP_xxx 變量之外，在你的應用代碼中始終存在兩個默認變量NODE_ENV 和BASE_URL
第三 在根目錄新建文件
- .env.development 本地開發(fā)環(huán)境配置
- 內容如下
NODE_ENV='development'
- .env.staging 測試環(huán)境配置
NODE_ENV='production'
- .env.production 正式環(huán)境配置
NODE_ENV='production'
第四
文件已建立完畢,下一步該封裝baseURL了,如果你封裝了axios,在你的axios父文件夾中在新建一個baseURL.js里面寫的是判斷環(huán)境的代碼
let baseURL = "";
if (process.env.NODE_ENV == "development") {
// 開發(fā)環(huán)境 因為我這里寫了配置跨域的重定路徑所以是api
baseURL = "/api";
} else if (process.env.NODE_ENV == "production") {
// 正式環(huán)境
baseURL = "https://www.baidu.com";
} else {
// 測試環(huán)境
baseURL = "https://www.ceshi.com";
}
export default baseURL;
第五
導出baseURL 在封裝axsio的地方導入baseURL 將公共地址換成 baseURL變量 (baseURL變量就是寫的環(huán)境判斷)
使用不同的命令 請求的網址就不一樣 如
//啟動本地服務器 npm run serve //啟動打包命令 npm run build //啟動測試環(huán)境命令 npm run test
說一個細節(jié):如果運行打包命令,dist中index.html直接打開是相對電腦盤符的
要使用一個插件 直接在vsc插件管理下載
總結:
先配置package.json 在新建需要文件 然后寫判斷環(huán)境代碼
本篇文章就到這里了，希望能夠給你帶來幫助，也希望您能夠多多關注腳本之家的更多內容!
相關文章
Vue 3 + Element Plus樹形表格全選多選及子節(jié)點勾選的問題解決方
在本文中,我們解決了Vue 3和Element Plus樹形表格中的全選、多選、子節(jié)點勾選和父節(jié)點勾選等常見問題,通過逐步實現(xiàn)這些功能,您可以構建功能強大且用戶友好的樹形表格組件,以滿足各種數據展示需求,對Vue 3 Element Plus樹形表格相關知識感興趣的朋友一起看看吧2023-12-12
elmentui是一款為vue設計的桌面組件庫,下面這篇文章主要給大家介紹了關于解決vue3使用element-ui的具體操作,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-08-08
vue-pdf實現(xiàn)pdf在線預覽并實現(xiàn)自定義預覽框高度
這篇文章主要介紹了vue-pdf實現(xiàn)pdf在線預覽并實現(xiàn)自定義預覽框高度方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了vuex5中的Pinia插件機制，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
這篇文章主要介紹了echarts3如何清空上一次加載的series數據，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
在vue項目中我們常常需要用到computed和watch，那么我們究竟在什么場景下使用computed和watch呢？他們之間又有什么區(qū)別呢？本將給大家詳細的介紹一下,需要的朋友可以參考下2023-05-05
Vue之el-select結合v-if動態(tài)控制template顯示隱藏方式
這篇文章主要介紹了Vue之el-select結合v-if動態(tài)控制template顯示隱藏方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
這篇文章主要介紹了vue返回首頁后如何清空路由問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
詳解Vue+axios+Node+express實現(xiàn)文件上傳(用戶頭像上傳)
這篇文章主要介紹了詳解Vue+axios+Node+express實現(xiàn)文件上傳(用戶頭像上傳)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
本篇文章主要介紹了Vue實現(xiàn)自帶的過濾器，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-03-03