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

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

這篇文章主要介紹了vue-cli 環(huán)境變量 process.env的使用及說明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(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 - 會(huì)是 "development"、"production" 或 "test" 中的一個(gè)。具體的值取決于應(yīng)用運(yùn)行的模式。
BASE_URL - 會(huì)和 vue.config.js 中的 publicPath 選項(xiàng)相符，即你的應(yīng)用會(huì)部署到的基礎(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é)果如下

測(cè)試test --> VUE_APP_BASEAPI 為“/”的好處是在切換環(huán)境的接口請(qǐng)求直接為當(dāng)前域名

//該配置為打包到測(cè)試服的配置
//該配置保留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)境的接口請(qǐng)求直接為當(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對(duì)應(yīng).env.xxx的xxx

而.env.test比較特殊,默認(rèn)NODE_ENV為development,打包時(shí)視作單元測(cè)試,不會(huì)打出css和圖片文件,解決辦法是可以強(qiáng)行指定為production

使用方法

process.env.xxxx

總結(jié)

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

您可能感興趣的文章:

相關(guān)文章

解決nuxt頁(yè)面中mounted、created、watch執(zhí)行兩遍的問題
這篇文章主要介紹了解決nuxt頁(yè)面中mounted、created、watch執(zhí)行兩遍的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2020-11-11
利用Vite2和Vue3實(shí)現(xiàn)網(wǎng)站國(guó)際化的全過程
vite2已經(jīng)出來一段時(shí)間了,最近沒忍住嘗試了一下,這篇文章主要給大家介紹了關(guān)于利用Vite2和Vue3實(shí)現(xiàn)網(wǎng)站國(guó)際化的相關(guān)資料,需要的朋友可以參考下
2021-08-08
element實(shí)現(xiàn)二級(jí)菜單和頂部導(dǎo)航聯(lián)動(dòng)的示例
本文主要介紹了element實(shí)現(xiàn)二級(jí)菜單和頂部導(dǎo)航聯(lián)動(dòng)的示例，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-02-02
Vue3?echarts組件化及使用hook進(jìn)行resize方式
這篇文章主要介紹了Vue3?echarts組件化及使用hook進(jìn)行resize方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-04-04
vue實(shí)現(xiàn)顯示消息提示框功能
這篇文章主要介紹了vue實(shí)現(xiàn)顯示消息提示框功能,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-04-04
Vue項(xiàng)目中使用better-scroll實(shí)現(xiàn)菜單映射功能方法
這篇文章主要介紹了Vue項(xiàng)目中使用better-scroll實(shí)現(xiàn)菜單映射功能，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-09-09
vue實(shí)現(xiàn)簡(jiǎn)單計(jì)算商品價(jià)格
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)簡(jiǎn)單計(jì)算商品價(jià)格，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-09-09
vue-router+nginx 非根路徑配置方法
這篇文章主要介紹了vue-router+nginx 非根路徑配置方法,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-06-06
從vue-router看前端路由的兩種實(shí)現(xiàn)
本文由淺入深觀摩vue-router源碼是如何通過hash與History interface兩種方式實(shí)現(xiàn)前端路由，介紹了相關(guān)原理，并對(duì)比了兩種方式的優(yōu)缺點(diǎn)與注意事項(xiàng)。最后分析了如何實(shí)現(xiàn)可以直接從文件系統(tǒng)加載而不借助后端服務(wù)器的Vue單頁(yè)應(yīng)用。
2021-05-05
vue實(shí)現(xiàn)element-ui對(duì)話框可拖拽功能
這篇文章主要介紹了vue實(shí)現(xiàn)element-ui對(duì)話框可拖拽功能，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-08-08