如何在vite里獲取env環(huán)境變量淺析
.env環(huán)境配置文件
在項(xiàng)目中總會(huì)遇到一些默認(rèn)的配置,需要我們配置到靜態(tài)文件中方便我們?nèi)カ@取,這時(shí)候就可以用到這個(gè).env環(huán)境變量文件,在cli創(chuàng)建的項(xiàng)目中頂層的nodejs會(huì)有一個(gè)process對(duì)象,這個(gè)對(duì)象可以根據(jù)不同的環(huán)境獲取不同的環(huán)境配置文件,但是,在vite里面無法使用process對(duì)象,通過研究,在vite里使用環(huán)境變量更加簡(jiǎn)便
在cli項(xiàng)目中我們可以是配置.env.[mode]文件來配置環(huán)境變量
代碼展示。
ENV='development' # base api VUE_APP_BASE_URL='www.baidu.com' VUE_APP_BASE_NAME='VUE項(xiàng)目'
ENV='development' # base api VUE_APP_BASE_URL='www.baidu.com' VUE_APP_BASE_NAME='VUE項(xiàng)目'
注意：屬性名必須以 VUE_APP_ 開頭，如：VUE_APP_XXX
在cli項(xiàng)目中使用.env.[mode]
可以在js文件中是用process.env來獲取環(huán)境配置。
//code process.env
// An highlighted block let baseURL = process.env.VUE_APP_BASE_API;
在vite中使用.env文件
Vite 在一個(gè)特殊的 import.meta.env 對(duì)象上暴露環(huán)境變量。這里有一些在所有情況下都可以使用的內(nèi)建變量：
- import.meta.env.MODE: {string} 應(yīng)用運(yùn)行的模式。
- import.meta.env.BASE_URL: {string} 部署應(yīng)用時(shí)的基本 URL。他由base 配置項(xiàng)決定。
- import.meta.env.PROD: {boolean} 應(yīng)用是否運(yùn)行在生產(chǎn)環(huán)境。
- import.meta.env.DEV: {boolean} 應(yīng)用是否運(yùn)行在開發(fā)環(huán)境 (永遠(yuǎn)與import.meta.env.PROD相反)。
為了防止意外地將一些環(huán)境變量泄漏到客戶端，只有以 VITE_ 為前綴的變量才會(huì)暴露給經(jīng)過 vite 處理的代碼
代碼展示。
ENV='development' # base api VITE_APP_BASE_URL='http://10.243.11.35:7200/' VITE_APP_BASE_NAME='vite項(xiàng)目'
ENV='development' # base api VITE_APP_BASE_URL='http://10.243.11.35:7200/' VITE_APP_BASE_NAME='vite項(xiàng)目'
console.log(import.meta.env)
打印結(jié)果如下
vite使用環(huán)境配置的具體文檔參考vite官網(wǎng)鏈接: https://vitejs.cn/guide/env-and-mode.html
總結(jié)
到此這篇關(guān)于如何在vite里獲取env環(huán)境變量的文章就介紹到這了,更多相關(guān)vite獲取env環(huán)境變量?jī)?nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
打包組件報(bào)錯(cuò):Error:Cannot?find?module?'vue/compiler-sfc&ap
最近遇到這樣的問題,vue組件庫搭建過程中使用webpack打包組件時(shí)報(bào)錯(cuò),本文給大家分享打包組件報(bào)錯(cuò):Error:?Cannot?find?module?‘vue/compiler-sfc‘的解決方法,感興趣的朋友一起看看吧2023-12-12
權(quán)限是對(duì)特定資源的訪問許可，所謂權(quán)限控制，也就是確保用戶只能訪問到被分配的資源，這篇文章主要介紹了vue的權(quán)限管理的相關(guān)知識(shí),需要的朋友可以參考下2022-06-06
開發(fā)任務(wù)中有這樣一個(gè)需求，下拉框中需要展示超過5000條數(shù)據(jù)，甚至更多，這數(shù)據(jù)量直接整個(gè)頁面卡死了，就想到在下拉框中加分頁，下面小編通過實(shí)例代碼介紹下Vue下拉框加分頁搜索功能的實(shí)現(xiàn)，感興趣的朋友一起看看吧2022-11-11
vue+elementUI的表格最后一行合計(jì)自定義顯示方式
這篇文章主要介紹了vue+elementUI的表格最后一行合計(jì)自定義顯示方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
vue動(dòng)畫之點(diǎn)擊按鈕往上漸漸顯示出來的實(shí)例
今天小編就為大家分享一篇vue動(dòng)畫之點(diǎn)擊按鈕往上漸漸顯示出來的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09
v-distpicker地區(qū)選擇器組件使用實(shí)例詳解
代碼添加了一個(gè)vDistpickerHandle的事件處理函數(shù)對(duì)地區(qū)選擇器中的數(shù)據(jù)進(jìn)行處理,將數(shù)據(jù)存儲(chǔ)到form對(duì)象的相應(yīng)屬性中,方便數(shù)據(jù)提交,這篇文章主要介紹了v-distpicker地區(qū)選擇器組件使用,需要的朋友可以參考下2024-02-02
在 Vue3 中,setup 函數(shù)是一個(gè)新引入的概念,它代替了之前版本中的 data、computed、methods 等選項(xiàng),用于設(shè)置組件的初始狀態(tài)和邏輯,本文將主要介紹Setup的基本用法和少量原理2024-02-02
本文主要介紹了electron最小化托盤設(shè)置，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
這篇文章主要介紹了vue如何關(guān)閉prettier警告warn問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)界面滑動(dòng)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-07-07