vue3+vite使用環(huán)境變量.env的一些配置情況詳細(xì)說(shuō)明

更新時(shí)間：2022年12月05日 11:24:49 作者：一室易安

開(kāi)發(fā)中經(jīng)常會(huì)使用環(huán)境變量,Vite相比于Webpack也有一定的變化,下面這篇文章主要給大家介紹了關(guān)于vue3+vite使用環(huán)境變量.env的一些配置情況說(shuō)明的相關(guān)資料,需要的朋友可以參考下

1、設(shè)置.env中的內(nèi)容信息注意vue3+vite 必須使用VITE開(kāi)頭的配置信息否則無(wú)法獲取
2、在 vite 中使用環(huán)境變量，可以用 import.meta.env，有四種環(huán)境變量，如下所示：
3、使用環(huán)境變量
4、配置env.d.ts文件，為環(huán)境變量增加智能提示
5、在package.json中配置模式
補(bǔ)充：Vue3的Env環(huán)境變量配置的應(yīng)用
總結(jié)

在項(xiàng)目文件中新建文件.env .env.pro 兩個(gè)文件其中.env 是默認(rèn)設(shè)置 .env.pro 為正式環(huán)境設(shè)置

1、設(shè)置.env中的內(nèi)容信息注意vue3+vite 必須使用VITE開(kāi)頭的配置信息否則無(wú)法獲取

NODE_ENV = "env"	//
VITE_NODE_ENV = "env"	//VITE開(kāi)頭的給vue3+vite使用

如果不想使用VITE開(kāi)頭自己修改就在vite.config.ts文件中添加envPrefix:“APP_”

//vite.config.ts
export default defineConfig({
  plugins: [vue()],
  envPrefix:"APP_",//APP_  為自定義開(kāi)頭名
})

2、在 vite 中使用環(huán)境變量，可以用 import.meta.env，有四種環(huán)境變量，如下所示：

MODE，用來(lái)指明現(xiàn)在所處于的模式，一般通過(guò)它進(jìn)行不同環(huán)境的區(qū)分，比如 dev、test、pre、prd 等等，默認(rèn)為：“development”

BASE_URL，用來(lái)請(qǐng)求靜態(tài)資源初始的 url

PROD，用來(lái)判斷當(dāng)前環(huán)境是否是正式環(huán)境

DEV，用來(lái)與 PROD 相反的環(huán)境

SSR，用來(lái)判斷是否是服務(wù)端渲染的環(huán)境

3、使用環(huán)境變量

使用 import.meta.env.VITE_NODE_ENV 獲取環(huán)境變量

console.log( import.meta.env) //查看相關(guān)信息這里不顯示非VITE開(kāi)頭的變量

//老版本的vue2+webpack的情況

還是使用 process.env.NODE_ENV

console.log( process.env) //查看相關(guān)信息

4、配置env.d.ts文件，為環(huán)境變量增加智能提示

正常使用的時(shí)候沒(méi)有提示信息，想增加提示信息在vite-env.d.ts或者env.d.ts進(jìn)行如下配置即可

/// <reference types="vite/client" />

interface ImportMetaEnv {
  readonly VITE_NODE_ENV:string;//定義提示信息 數(shù)據(jù)是只讀的無(wú)法被修改
  //多個(gè)變量定義多個(gè)...
}

declare module '*.vue' {
  import type { DefineComponent } from 'vue'
  const component: DefineComponent<{}, {}, any>
  export default component
}

5、在package.json中配置模式

上面使用的時(shí)候是固定寫(xiě)法需要切換.env 和 .env.pro 中不同的變量信息在打包中配置如下：

使用 --mode pro 進(jìn)行設(shè)置

 "scripts": {
    "serve": "vite",	//未指定默認(rèn)取.env中的配置
    "dev": "vite --mode dev",   // 取 .env.dev文件中的配置
    "pro": "vite --mode pro",   // 取 .env.pro文件中的配置
    "build": "vue-tsc --noEmit && vite build",	//未指定默認(rèn)取.env中的配置
    "build:dev": "vue-tsc --noEmit && vite build --mode dev",    // build的時(shí)候取dev的配置
    "build:pro": "vue-tsc --noEmit && vite build --mode pro", 	// build的時(shí)候取pro的配置
    "preview": "vite preview"
  },

最后, 想要在提交代碼時(shí)忽略本地.env文件，還要在.gitignore文件中添加.local

node_modules
dist
dist-ssr
*.local

補(bǔ)充：Vue3的Env環(huán)境變量配置的應(yīng)用

.env（# 所有環(huán)境默認(rèn)）

# 所有環(huán)境默認(rèn)
 
# 頁(yè)面 title 前綴
VUE_APP_TITLE=某某某
 
# 網(wǎng)絡(luò)請(qǐng)求公用地址
VUE_APP_API= /

.env.development（# 開(kāi)發(fā)環(huán)境）

# 開(kāi)發(fā)環(huán)境
 
# 指定構(gòu)建模式
VITE_NODE_ENV=development
 
# 頁(yè)面 title 前綴
VUE_APP_TITLE=某某某
 
# 網(wǎng)絡(luò)請(qǐng)求公用地址
VITE_APP_API=/api/
 
# 首頁(yè)是否顯示登錄
VITE_SHOW_LOGIN='yes'
 
VITE_SOME_APPENV='1000006'

.env.production（# 生產(chǎn)環(huán)境）

# 構(gòu)建預(yù)覽頁(yè)面
 
# 指定構(gòu)建模式 production
VITE_NODE_ENV=test
 
# 頁(yè)面 title 前綴
VUE_APP_TITLE=某某某
 
# 網(wǎng)絡(luò)請(qǐng)求公用地址
VITE_APP_API=/
 
# 首頁(yè)是否顯示登錄
VITE_SHOW_LOGIN='no'
 
VITE_SOME_APPENV='1000002'

在頁(yè)面中需要參與環(huán)境判斷時(shí)則可使用

console.log(import.meta.env.VITE_NODE_ENV)

打印結(jié)果

總結(jié)

到此這篇關(guān)于vue3+vite使用環(huán)境變量.env的一些配置情況詳細(xì)說(shuō)明的文章就介紹到這了,更多相關(guān)vue3+vite使用環(huán)境變量.env配置內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: