vue-cli 環(huán)境變量 process.env的使用及說明

更新時(shí)間：2022年12月07日 14:43:54 作者：前端摳腳

這篇文章主要介紹了vue-cli 環(huán)境變量 process.env的使用及說明，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

vue-cli 環(huán)境變量 process.env使用

參考官網(wǎng)： https://cli.vuejs.org/zh/guide/mode-and-env.html#在客戶端側(cè)代碼中使用環(huán)境變量

話不多說直接看代碼

在package中的配置如下圖

舉個(gè)本地運(yùn)行的例子.env.serve；

注意：

除了 VUE_APP_* 變量之外，在你的應(yīng)用代碼中始終可用的還有兩個(gè)特殊的變量：

NODE_ENV - 會是 "development"、"production" 或 "test" 中的一個(gè)。具體的值取決于應(yīng)用運(yùn)行的模式。
BASE_URL - 會和 vue.config.js 中的 publicPath 選項(xiàng)相符，即你的應(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/

運(yùn)行 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,打包時(shí)視作單元測試,不會打出css和圖片文件,解決辦法是可以強(qiáng)行指定為production

使用方法

process.env.xxxx

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue.js 1.x與2.0中js實(shí)時(shí)監(jiān)聽input值的變化
這篇文章主要介紹了vue.js 1.x與vue.js2.0中js實(shí)時(shí)監(jiān)聽input值的變化的相關(guān)資料，文中介紹的非常詳細(xì)，對大家具有一定的參考價(jià)值，需要的朋友們下面來一起看看吧。
2017-03-03
vue組件vue-treeselect箭頭和叉圖標(biāo)變大問題及解決
這篇文章主要介紹了vue組件vue-treeselect箭頭和叉圖標(biāo)變大問題及解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。
2022-07-07
淺談vuex為什么不建議在action中修改state
這篇文章主要介紹了淺談vuex為什么不建議在action中修改state，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-02-02
vue 項(xiàng)目集成 electron 和 electron 打包及環(huán)境配
文章介紹了如何使用Vue和Electron開發(fā)桌面端應(yīng)用,包括安裝Electron、配置package.json、創(chuàng)建main.js文件、運(yùn)行和打包應(yīng)用等步驟,并分享了一些常見的打包錯(cuò)誤及其解決方法,感興趣的朋友一起看看吧
2025-01-01
Vue3中實(shí)現(xiàn)div拖拽功能
這篇文章主要介紹了Vue3中實(shí)現(xiàn)div拖拽功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧
2024-03-03
Vue?echarts實(shí)例項(xiàng)目地區(qū)銷量趨勢堆疊折線圖實(shí)現(xiàn)詳解
Echarts，它是一個(gè)與框架無關(guān)的 JS 圖表庫，但是它基于Js，這樣很多框架都能使用它，例如Vue，估計(jì)IONIC也能用，因?yàn)槲业牧?xí)慣，每次新嘗試做一個(gè)功能的時(shí)候，總要新創(chuàng)建個(gè)小項(xiàng)目，做做Demo
2022-09-09
vue實(shí)現(xiàn)計(jì)數(shù)器簡單制作
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)計(jì)數(shù)器簡單制作，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-06-06
Vue中使用回車鍵觸發(fā)事件的方法實(shí)現(xiàn)
本文主要介紹了Vue中使用回車鍵觸發(fā)事件的方法實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-07-07
vue的keep-alive用法技巧
在本篇文章里小編給大家整理的是關(guān)于vue的keep-alive用法技巧以及實(shí)例代碼，需要的朋友們學(xué)習(xí)下。
2019-08-08
VUE安裝nrm管理多個(gè)npm源的方法示例
nrm是一個(gè)npm源管理器,允許快速切換不同npm源,提高包管理效率,下面就來介紹一下VUE安裝nrm管理多個(gè)npm源的方法示例,感興趣的可以了解一下
2025-01-01