vue-cli 環(huán)境變量 process.env的使用及說明
更新時間：2022年12月07日 14:43:54 作者：前端摳腳
這篇文章主要介紹了vue-cli 環(huán)境變量 process.env的使用及說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
vue-cli 環(huán)境變量 process.env使用
參考官網(wǎng)： https://cli.vuejs.org/zh/guide/mode-and-env.html#在客戶端側代碼中使用環(huán)境變量
話不多說直接看代碼
在package中的配置如下圖
舉個本地運行的例子.env.serve；
注意：
除了 VUE_APP_* 變量之外，在你的應用代碼中始終可用的還有兩個特殊的變量：
- NODE_ENV - 會是 "development"、"production" 或 "test" 中的一個。具體的值取決于應用運行的模式。
- BASE_URL - 會和 vue.config.js 中的 publicPath 選項相符，即你的應用會部署到的基礎路徑。
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在模式下,然后就可以使用當中的全局變VUE_APP_BASEURL
mounted() {
let baseUrl = process.env.VUE_APP_BASEURL;
console.log(baseUrl)
}結果如下
測試test --> VUE_APP_BASEAPI 為“/”的好處是在切換環(huán)境的接口請求直接為當前域名
//該配置為打包到測試服的配置 //該配置保留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)境的接口請求直接為當前域名
//該配置為打包上正式環(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對應.env.xxx的xxx
而.env.test比較特殊,默認NODE_ENV為development,打包時視作單元測試,不會打出css和圖片文件,解決辦法是可以強行指定為production
使用方法
process.env.xxxx
總結
以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
解決nuxt頁面中mounted、created、watch執(zhí)行兩遍的問題
這篇文章主要介紹了解決nuxt頁面中mounted、created、watch執(zhí)行兩遍的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
利用Vite2和Vue3實現(xiàn)網(wǎng)站國際化的全過程
vite2已經出來一段時間了,最近沒忍住嘗試了一下,這篇文章主要給大家介紹了關于利用Vite2和Vue3實現(xiàn)網(wǎng)站國際化的相關資料,需要的朋友可以參考下2021-08-08
element實現(xiàn)二級菜單和頂部導航聯(lián)動的示例
本文主要介紹了element實現(xiàn)二級菜單和頂部導航聯(lián)動的示例，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-02-02
Vue3?echarts組件化及使用hook進行resize方式
這篇文章主要介紹了Vue3?echarts組件化及使用hook進行resize方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
這篇文章主要介紹了vue實現(xiàn)顯示消息提示框功能,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-04-04
Vue項目中使用better-scroll實現(xiàn)菜單映射功能方法
這篇文章主要介紹了Vue項目中使用better-scroll實現(xiàn)菜單映射功能，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-09-09
這篇文章主要為大家詳細介紹了vue實現(xiàn)簡單計算商品價格，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-09-09
這篇文章主要介紹了vue-router+nginx 非根路徑配置方法,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06
本文由淺入深觀摩vue-router源碼是如何通過hash與History interface兩種方式實現(xiàn)前端路由，介紹了相關原理，并對比了兩種方式的優(yōu)缺點與注意事項。最后分析了如何實現(xiàn)可以直接從文件系統(tǒng)加載而不借助后端服務器的Vue單頁應用。2021-05-05
這篇文章主要介紹了vue實現(xiàn)element-ui對話框可拖拽功能，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08