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