vue3+vite使用環(huán)境變量.env的一些配置情況詳細說明
在項目文件中新建文件.env .env.pro 兩個文件其中.env 是默認設置 .env.pro 為正式環(huán)境設置
1、設置.env中的內容信息 注意vue3+vite 必須使用VITE開頭的配置信息 否則無法獲取
NODE_ENV = "env" // VITE_NODE_ENV = "env" //VITE開頭的給vue3+vite使用
如果不想使用VITE開頭自己修改就在vite.config.ts文件中添加envPrefix:“APP_”
//vite.config.ts
export default defineConfig({
plugins: [vue()],
envPrefix:"APP_",//APP_ 為自定義開頭名
})
2、在 vite 中使用環(huán)境變量，可以用 import.meta.env，有四種環(huán)境變量，如下所示：
MODE，用來指明現在所處于的模式，一般通過它進行不同環(huán)境的區(qū)分，比如 dev、test、pre、prd 等等，默認為：“development”
BASE_URL，用來請求靜態(tài)資源初始的 url
PROD，用來判斷當前環(huán)境是否是正式環(huán)境
DEV，用來與 PROD 相反的環(huán)境
SSR，用來判斷是否是服務端渲染的環(huán)境
3、使用環(huán)境變量
使用 import.meta.env.VITE_NODE_ENV 獲取環(huán)境變量
console.log( import.meta.env) //查看相關信息 這里不顯示非VITE開頭的變量
//老版本的vue2+webpack的情況
還是使用 process.env.NODE_ENV
console.log( process.env) //查看相關信息
4、配置env.d.ts文件，為環(huán)境變量增加智能提示
正常使用的時候沒有提示信息，想增加提示信息在vite-env.d.ts或者env.d.ts進行如下配置即可
/// <reference types="vite/client" />
interface ImportMetaEnv {
readonly VITE_NODE_ENV:string;//定義提示信息 數據是只讀的無法被修改
//多個變量定義多個...
}
declare module '*.vue' {
import type { DefineComponent } from 'vue'
const component: DefineComponent<{}, {}, any>
export default component
}
5、在package.json中配置模式
上面使用的時候是固定寫法 需要切換.env 和 .env.pro 中不同的變量信息 在打包中配置 如下：
使用 --mode pro 進行設置
"scripts": {
"serve": "vite", //未指定默認取.env中的配置
"dev": "vite --mode dev", // 取 .env.dev文件中的配置
"pro": "vite --mode pro", // 取 .env.pro文件中的配置
"build": "vue-tsc --noEmit && vite build", //未指定默認取.env中的配置
"build:dev": "vue-tsc --noEmit && vite build --mode dev", // build的時候取dev的配置
"build:pro": "vue-tsc --noEmit && vite build --mode pro", // build的時候取pro的配置
"preview": "vite preview"
},
最后, 想要在提交代碼時忽略本地.env文件，還要在.gitignore文件中添加.local
node_modules dist dist-ssr *.local
補充：Vue3的Env環(huán)境變量配置的應用
.env（# 所有環(huán)境默認）
# 所有環(huán)境默認 # 頁面 title 前綴 VUE_APP_TITLE=某某某 # 網絡請求公用地址 VUE_APP_API= /
.env.development（# 開發(fā)環(huán)境）
# 開發(fā)環(huán)境 # 指定構建模式 VITE_NODE_ENV=development # 頁面 title 前綴 VUE_APP_TITLE=某某某 # 網絡請求公用地址 VITE_APP_API=/api/ # 首頁是否顯示登錄 VITE_SHOW_LOGIN='yes' VITE_SOME_APPENV='1000006'
.env.production（# 生產環(huán)境）
# 構建預覽頁面 # 指定構建模式 production VITE_NODE_ENV=test # 頁面 title 前綴 VUE_APP_TITLE=某某某 # 網絡請求公用地址 VITE_APP_API=/ # 首頁是否顯示登錄 VITE_SHOW_LOGIN='no' VITE_SOME_APPENV='1000002'
在頁面中需要參與環(huán)境判斷時則可使用
console.log(import.meta.env.VITE_NODE_ENV)
打印結果
總結
到此這篇關于vue3+vite使用環(huán)境變量.env的一些配置情況詳細說明的文章就介紹到這了,更多相關vue3+vite使用環(huán)境變量.env配置內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了vue-cli3 從搭建到優(yōu)化的詳細步驟，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-01-01
隨著vue3.4版本的發(fā)布,defineModel也正式轉正了,它可以簡化父子組件之間的雙向綁定,是目前官方推薦的雙向綁定實現方式,下面就跟隨小編一起深入了解一下defineModel的使用吧2024-02-02
項目當中如果做新增/修改/刪除等等操作通常情況下都需要刷新數據或者刷新當前頁面。本文為大家整理了三種不同的實現方法，需要的可以參考一下2023-01-01
這篇文章主要介紹了Vue-scoped(局部)樣式使用方法及實例代碼，文中示例代碼介紹了的非常詳細感興趣的同學可以參考閱讀一下2023-05-05
這篇文章主要為大家詳細介紹了vue實現伸縮菜單功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
今天小編就為大家分享一篇vue-cli 3.x 修改dist路徑的方法，具有很好的參考價值。希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
??Vuex?是一個專為?Vue.js?應用程序開發(fā)的狀態(tài)管理模式。它采用集中式存儲管理應用的所有組件的狀態(tài)。本文會通過一些簡單的示例，為大家詳細講解Vuex的使用，感興趣的小伙伴可以跟隨小編一起學習一下2022-11-11
本文將詳細介紹通過Vue使多元素進行過渡動畫,需要的朋友可以參考下2020-02-02
這篇文章主要介紹了超詳細的5個Shell腳本實例分享(值得收藏),文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-08-08
這篇文章主要為大家詳細介紹了vue.draggable實現表格拖拽排序效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-12-12