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