vue3.0項目小白填坑之vue3.0+vite獲取環(huán)境變量
更新時間：2024年03月18日 09:07:06 作者：半夏ing
Vue3項目使用vite作為打包工具時,環(huán)境變量可以保存在.env文件中,在build時進行解析,這篇文章主要給大家介紹了關(guān)于vue3.0項目小白填坑之vue3.0+vite獲取環(huán)境變量的相關(guā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é)
到此這篇關(guān)于vue3.0項目小白填坑之vue3.0+vite獲取環(huán)境變量的文章就介紹到這了,更多相關(guān)vue3.0 vite獲取環(huán)境變量內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
無論單頁還是多頁，我的實現(xiàn)思路是總體配置404頁面的思路就是在前端路由表中添加一個 path: '/404' 的路由，渲染相應(yīng)的404頁面。這篇文章主要介紹了Vue單頁及多頁應(yīng)用全局配置404頁面實踐,需要的朋友可以參考下2018-05-05
利用vue.js把靜態(tài)json綁定bootstrap的table方法
今天小編就為大家分享一篇利用vue.js把靜態(tài)json綁定bootstrap的table方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
treeSelect樹組件設(shè)置父節(jié)點禁用的方法實例
這篇文章主要給大家介紹了關(guān)于treeSelect樹組件設(shè)置父節(jié)點禁用的相關(guān)資料,文中通過圖文以及示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2022-12-12
下面小編就為大家分享一篇vue之瀏覽器存儲方法封裝實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
這篇文章主要介紹了Intellij IDEA搭建vue-cli項目的方法步驟,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-10-10
今天小編就為大家分享一篇vue transition 在子組件中失效的解決，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
本篇文章主要介紹了vue 2.0 購物車小球拋物線的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-02-02
這篇文章主要介紹了Vue 計數(shù)器的實現(xiàn)，主要利用HTML實現(xiàn)步驟現(xiàn)在頁面上簡單實現(xiàn)一個計數(shù)器，內(nèi)容簡單且詳細,需要的朋友可以參考一下2021-10-10
這篇文章主要介紹了vue項目使用微信公眾號支付總結(jié)，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2018-10-10
Carousel（走馬燈）是一種常見的前端組件,通常用于展示多個項目（通常是圖片或內(nèi)容塊）的輪播效果,這篇文章主要介紹了vue3項目中的el-carousel 輪播圖的使用,需要的朋友可以參考下2024-02-02