vue-cli 環(huán)境變量 process.env的使用及說明
vue-cli 環(huán)境變量 process.env使用
參考官網(wǎng)： https://cli.vuejs.org/zh/guide/mode-and-env.html#在客戶端側(cè)代碼中使用環(huán)境變量
話不多說直接看代碼
在package中的配置如下圖
舉個本地運行的例子.env.serve；
注意：
除了 VUE_APP_* 變量之外，在你的應(yīng)用代碼中始終可用的還有兩個特殊的變量：
- NODE_ENV - 會是 "development"、"production" 或 "test" 中的一個。具體的值取決于應(yīng)用運行的模式。
- BASE_URL - 會和 vue.config.js 中的 publicPath 選項相符，即你的應(yīng)用會部署到的基礎(chǔ)路徑。
NODE_ENV=development VUE_APP_CURRENTMODE=serve VUE_APP_BASEURL=http://clife.ngrok.i84.com.cn VUE_APP_BASEAPI=http://clife.ngrok.i84.com.cn/
運行 yarn serve在模式下,然后就可以使用當(dāng)中的全局變VUE_APP_BASEURL
mounted() {
let baseUrl = process.env.VUE_APP_BASEURL;
console.log(baseUrl)
}結(jié)果如下
測試test --> VUE_APP_BASEAPI 為“/”的好處是在切換環(huán)境的接口請求直接為當(dāng)前域名
//該配置為打包到測試服的配置 //該配置保留vconsole插件功能 NODE_ENV=production VUE_APP_CURRENTMODE=test VUE_APP_BASEURL=http://clife.ngrok.i84.com.cn VUE_APP_BASEAPI=/
production -->VUE_APP_BASEAPI 為“/”的好處是在切換環(huán)境的接口請求直接為當(dāng)前域名
//該配置為打包上正式環(huán)境配置 NODE_ENV=production VUE_APP_CURRENTMODE=production VUE_APP_BASEAPI=/
vue-cli配置環(huán)境變量process.env.xxx
模式和環(huán)境變量 | Vue CLI
自己新建.env.xxx
然后在package.json中,--mode對應(yīng).env.xxx的xxx
而.env.test比較特殊,默認(rèn)NODE_ENV為development,打包時視作單元測試,不會打出css和圖片文件,解決辦法是可以強行指定為production
使用方法
process.env.xxxx
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue.js 1.x與2.0中js實時監(jiān)聽input值的變化
這篇文章主要介紹了vue.js 1.x與vue.js2.0中js實時監(jiān)聽input值的變化的相關(guān)資料，文中介紹的非常詳細(xì)，對大家具有一定的參考價值，需要的朋友們下面來一起看看吧。2017-03-03
vue組件vue-treeselect箭頭和叉圖標(biāo)變大問題及解決
這篇文章主要介紹了vue組件vue-treeselect箭頭和叉圖標(biāo)變大問題及解決方案，具有很好的參考價值，希望對大家有所幫助。2022-07-07
這篇文章主要介紹了淺談vuex為什么不建議在action中修改state，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
vue 項目集成 electron 和 electron 打包及環(huán)境配
文章介紹了如何使用Vue和Electron開發(fā)桌面端應(yīng)用,包括安裝Electron、配置package.json、創(chuàng)建main.js文件、運行和打包應(yīng)用等步驟,并分享了一些常見的打包錯誤及其解決方法,感興趣的朋友一起看看吧2025-01-01
這篇文章主要介紹了Vue3中實現(xiàn)div拖拽功能,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-03-03
Vue?echarts實例項目地區(qū)銷量趨勢堆疊折線圖實現(xiàn)詳解
Echarts，它是一個與框架無關(guān)的 JS 圖表庫，但是它基于Js，這樣很多框架都能使用它，例如Vue，估計IONIC也能用，因為我的習(xí)慣，每次新嘗試做一個功能的時候，總要新創(chuàng)建個小項目，做做Demo2022-09-09
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)計數(shù)器簡單制作，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-06-06
本文主要介紹了Vue中使用回車鍵觸發(fā)事件的方法實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
在本篇文章里小編給大家整理的是關(guān)于vue的keep-alive用法技巧以及實例代碼，需要的朋友們學(xué)習(xí)下。2019-08-08
nrm是一個npm源管理器,允許快速切換不同npm源,提高包管理效率,下面就來介紹一下VUE安裝nrm管理多個npm源的方法示例,感興趣的可以了解一下2025-01-01