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è)集合 ，訪問(wèn)某個(gè)屬性 直接env.XXX讀取即可
const env = loadEnv(mode , process.cwd())
}
需要注意的是，為了防止意外地將一些環(huán)境變量泄漏到客戶端，只有以 VITE_ 為前綴的變量才會(huì)暴露給經(jīng)過(guò) vite 處理的代碼。例如下面這個(gè)文件中
// .env.development 文件中 USER_PASSWORD = foobar // 沒(méi)有以 `VITE_` 為前綴 不會(huì)暴露出去 VITE_APP_BASE_PATH = 123 // 可以暴露出去
2、頁(yè)面上獲取
<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 將無(wú)法生效。例如，動(dòng)態(tài) key 取值 import.meta.env[key] 是無(wú)效的
附：vue3判斷當(dāng)前的環(huán)境變量, 獲取環(huán)境變量中的值
1.判斷當(dāng)前是開(kāi)發(fā)環(huán)境還是生產(chǎn)環(huán)境：
if(import.meta.env.DEV) // 是否為開(kāi)發(fā)環(huán)境 if(import.meta.env.PROD) // 是否為生產(chǎn)環(huán)境
2.環(huán)境配置變量中的值：
比如.env.production環(huán)境變量中有：NAME='XXXX'
訪問(wèn)這個(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)文章
Vue單頁(yè)及多頁(yè)應(yīng)用全局配置404頁(yè)面實(shí)踐記錄
無(wú)論單頁(yè)還是多頁(yè)，我的實(shí)現(xiàn)思路是總體配置404頁(yè)面的思路就是在前端路由表中添加一個(gè) path: '/404' 的路由，渲染相應(yīng)的404頁(yè)面。這篇文章主要介紹了Vue單頁(yè)及多頁(yè)應(yīng)用全局配置404頁(yè)面實(shí)踐,需要的朋友可以參考下2018-05-05
利用vue.js把靜態(tài)json綁定bootstrap的table方法
今天小編就為大家分享一篇利用vue.js把靜態(tài)json綁定bootstrap的table方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
treeSelect樹(shù)組件設(shè)置父節(jié)點(diǎn)禁用的方法實(shí)例
這篇文章主要給大家介紹了關(guān)于treeSelect樹(shù)組件設(shè)置父節(jié)點(diǎn)禁用的相關(guān)資料,文中通過(guò)圖文以及示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-12-12
下面小編就為大家分享一篇vue之瀏覽器存儲(chǔ)方法封裝實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
Intellij IDEA搭建vue-cli項(xiàng)目的方法步驟
這篇文章主要介紹了Intellij IDEA搭建vue-cli項(xiàng)目的方法步驟,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-10-10
今天小編就為大家分享一篇vue transition 在子組件中失效的解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11
vue 2.0 購(gòu)物車(chē)小球拋物線的示例代碼
本篇文章主要介紹了vue 2.0 購(gòu)物車(chē)小球拋物線的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-02-02
Vue 計(jì)數(shù)器的實(shí)現(xiàn)
這篇文章主要介紹了Vue 計(jì)數(shù)器的實(shí)現(xiàn)，主要利用HTML實(shí)現(xiàn)步驟現(xiàn)在頁(yè)面上簡(jiǎn)單實(shí)現(xiàn)一個(gè)計(jì)數(shù)器，內(nèi)容簡(jiǎn)單且詳細(xì),需要的朋友可以參考一下2021-10-10
vue項(xiàng)目使用微信公眾號(hào)支付總結(jié)及遇到的坑
這篇文章主要介紹了vue項(xiàng)目使用微信公眾號(hào)支付總結(jié)，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-10-10
vue3項(xiàng)目中的el-carousel 輪播圖的使用
Carousel（走馬燈）是一種常見(jiàn)的前端組件,通常用于展示多個(gè)項(xiàng)目（通常是圖片或內(nèi)容塊）的輪播效果,這篇文章主要介紹了vue3項(xiàng)目中的el-carousel 輪播圖的使用,需要的朋友可以參考下2024-02-02