vue3.0項目小白填坑之vue3.0+vite獲取環(huán)境變量
更新時間：2024年03月18日 09:07:06 作者：半夏ing
Vue3項目使用vite作為打包工具時,環(huán)境變量可以保存在.env文件中,在build時進行解析,這篇文章主要給大家介紹了關于vue3.0項目小白填坑之vue3.0+vite獲取環(huán)境變量的相關資料,需要的朋友可以參考下
淺淺記錄一下，畢竟好記性不如爛筆頭??
1、vite.config.ts文件里面
import { loadEnv } from 'vite'
export default ({mode}) => {
// 這里的env的值就是獲取到的當前運行環(huán)境的env文件對象，env的值是一個集合 ，訪問某個屬性 直接env.XXX讀取即可
const env = loadEnv(mode , process.cwd())
}
需要注意的是，為了防止意外地將一些環(huán)境變量泄漏到客戶端，只有以 VITE_ 為前綴的變量才會暴露給經(jīng)過 vite 處理的代碼。例如下面這個文件中
// .env.development 文件中 USER_PASSWORD = foobar // 沒有以 `VITE_` 為前綴 不會暴露出去 VITE_APP_BASE_PATH = 123 // 可以暴露出去
2、頁面上獲取
<script setup> // 直接使用import.meta.env去讀取環(huán)境變量文件里面的某個屬性 const XXX = import.meta.env.VITE_SOME_KEY </script>
在生產(chǎn)環(huán)境中，環(huán)境變量會在構(gòu)建時被靜態(tài)替換，因此，在引用它們時請使用完全靜態(tài)的字符串。動態(tài)的 key 將無法生效。例如，動態(tài) key 取值 import.meta.env[key] 是無效的
附：vue3判斷當前的環(huán)境變量, 獲取環(huán)境變量中的值
1.判斷當前是開發(fā)環(huán)境還是生產(chǎn)環(huán)境：
if(import.meta.env.DEV) // 是否為開發(fā)環(huán)境 if(import.meta.env.PROD) // 是否為生產(chǎn)環(huán)境
2.環(huán)境配置變量中的值：
比如.env.production環(huán)境變量中有：NAME='XXXX'
訪問這個NAME則可以：
import.meta.env.NAME
總結(jié)
到此這篇關于vue3.0項目小白填坑之vue3.0+vite獲取環(huán)境變量的文章就介紹到這了,更多相關vue3.0 vite獲取環(huán)境變量內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
Vue3數(shù)據(jù)更新,頁面沒有同步更新的問題及解決
這篇文章主要介紹了Vue3數(shù)據(jù)更新,頁面沒有同步更新的問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
在本篇文章里小編給大家整理了一篇關于VUE項目中加載已保存的筆記實例方法，有興趣的讀者們可以參考下。2019-09-09
vue中?根據(jù)判斷條件添加一個或多個style及class的寫法小結(jié)
這篇文章主要介紹了vue中?根據(jù)判斷條件添加一個或多個style及class的寫法,文中給大家補充介紹了關于vue里:class的使用結(jié)合自己的實現(xiàn)給大家講解，需要的朋友可以參考下2023-03-03
Vue項目中如何封裝axios（統(tǒng)一管理http請求）
這篇文章主要給大家介紹了關于Vue項目中如何封裝axios（統(tǒng)一管理http請求）的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-05-05
文章介紹了在使用Vue腳手架安裝過程中遇到錯誤的解決方法,包括卸載并重新安裝Node.js、使用cnpm安裝Vue CLI、配置全局緩存路徑以及設置環(huán)境變量等步驟2026-03-03
這篇文章主要介紹了Vue中插槽slot的使用示例詳解,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧2025-05-05
這篇文章主要介紹了vue中使用@blur獲取input?val值的實現(xiàn)方法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
在本文章里小編給大家整理了關于Vue中this.$nextTick的作用及用法，有需要的朋友們可以跟著學習參考下。2020-02-02
詳解關于Vue版本不匹配問題(Vue packages version mismatch)
這篇文章主要介紹了詳解關于Vue版本不匹配問題(Vue packages version mismatch)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
Vue3+Vite+TS使用elementPlus時踩的坑及解決
這篇文章主要介紹了Vue3+Vite+TS使用elementPlus時踩的坑及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10