前言??

在Vue 3中，你可以通過(guò) import.meta.env 訪問(wèn)環(huán)境變量。這些變量可以在你的應(yīng)用代碼中使用，但它們通常用于配置不應(yīng)該硬編碼在代碼中的值。

你可以在項(xiàng)目根目錄下的 .env 文件中設(shè)置環(huán)境變量，或者為不同的環(huán)境設(shè)置特定的 .env 文件，如 .env.development 和 .env.production 。

提示：以下是本篇文章正文內(nèi)容，下面案例可供參考

一、環(huán)境變量®?

Vite 在一個(gè)特殊的 import.meta.env 對(duì)象上暴露環(huán)境變量。這里有一些在所有情況下都可以使用的內(nèi)建變量：

• import.meta.env.MODE: {string} 應(yīng)用運(yùn)行的 模式 。
• import.meta.env.BASE_URL: {string} 部署應(yīng)用時(shí)的基本 URL 。他由 base 配置項(xiàng)決定。
• import.meta.env.PROD: {boolean} 應(yīng)用是否運(yùn)行在 生產(chǎn)環(huán)境 。
• import.meta.env.DEV: {boolean} 應(yīng)用是否運(yùn)行在 開(kāi)發(fā)環(huán)境 (永遠(yuǎn)與 import.meta.env.PROD相反)。
• import.meta.env.SSR: {boolean} 應(yīng)用是否運(yùn)行在 server 上。

1.1 生產(chǎn)環(huán)境替換

在生產(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ú)效的。

它還將替換出現(xiàn)在 JavaScript 和 Vue 模板中的字符串。這本應(yīng)是非常少見(jiàn)的，但也可能是不小心為之的。在這種情況下你可能會(huì)看到類似 Missing Semicolon 或 Unexpected token 等錯(cuò)誤，例如當(dāng) "process.env.NODE_ENV" 被替換為 ""development": " 。有一些方法可以避免這個(gè)問(wèn)題：

• 對(duì)于 JavaScript 字符串，你可以使用 unicode 零寬度空格來(lái)分割這個(gè)字符串，例如： ‘import.meta\u200b.env.MODE’。
• 對(duì)于 Vue 模板或其他編譯到 JavaScript 字符串的 HTML，你可以使用 <wbr> 標(biāo)簽，例如：import.meta.env.MODE。

二、.env 文件??

Vite 使用 dotenv 從你的 環(huán)境目錄 中的下列文件加載額外的環(huán)境變量：

.env                # 所有情況下都會(huì)加載
.env.local          # 所有情況下都會(huì)加載，但會(huì)被 git 忽略
.env.[mode]         # 只在指定模式下加載
.env.[mode].local   # 只在指定模式下加載，但會(huì)被 git 忽略

2.1 環(huán)境加載優(yōu)先級(jí)

一份用于指定模式的文件（例如 .env.production ）會(huì)比通用形式的優(yōu)先級(jí)更高（例如 .env）。

另外，Vite 執(zhí)行時(shí)已經(jīng)存在的環(huán)境變量有最高的優(yōu)先級(jí)，不會(huì)被 .env 類文件覆蓋。例如當(dāng)運(yùn)行 VITE_SOME_KEY=123 vite build 的時(shí)候。

.env 類文件會(huì)在 Vite 啟動(dòng)一開(kāi)始時(shí)被加載，而改動(dòng)會(huì)在重啟服務(wù)器后生效。

加載的環(huán)境變量也會(huì)通過(guò) import.meta.env 以 字符串 形式暴露給客戶端源碼。

??注意：為了防止意外地將一些環(huán)境變量泄漏到客戶端，只有以 VITE_ 為前綴的變量才會(huì)暴露給經(jīng)過(guò) vite 處理的代碼。例如下面這些環(huán)境變量：

VITE_SOME_KEY=123
DB_PASSWORD=foobar

只有 VITE_SOME_KEY 會(huì)被暴露為 import.meta.env.VITE_SOME_KEY 提供給客戶端源碼，而 DB_PASSWORD 則不會(huì)。

console.log(import.meta.env.VITE_SOME_KEY) // 123
console.log(import.meta.env.DB_PASSWORD) // undefined

安全注意事項(xiàng)：

如果你想自定義 env 變量的前綴，請(qǐng)參閱 envPrefix。

.env.*.local 文件應(yīng)是本地的，可以包含敏感變量。你應(yīng)該將 .local 添加到你的 .gitignore 中，以??避免它們被 git 檢入。

由于任何暴露給 Vite 源碼的變量最終都將出現(xiàn)在客戶端包中，VITE_* 變量應(yīng)該??不包含任何敏感信息 。

三、TypeScript 的智能提示???‍???

默認(rèn)情況下，Vite 在 vite/client.d.ts 中為 import.meta.env 提供了類型定義。隨著在 .env[mode] 文件中自定義了越來(lái)越多的環(huán)境變量，你可能想要在代碼中獲取這些以 VITE_ 為前綴的用戶自定義環(huán)境變量的 TypeScript 智能提示。

要想做到這一點(diǎn)，你可以在 src 目錄下創(chuàng)建一個(gè) env.d.ts 文件，接著按下面這樣增加 ImportMetaEnv 的定義：

/// <reference types="vite/client" />
interface ImportMetaEnv {
  readonly VITE_APP_TITLE: string
  // 更多環(huán)境變量...
}
interface ImportMeta {
  readonly env: ImportMetaEnv
}

如果你的代碼依賴于瀏覽器環(huán)境的類型，比如 DOM 和 WebWorker，你可以在 tsconfig.json 中修改 lib 字段來(lái)獲取類型支持。

{
  "lib": ["WebWorker"]
}

四、模式??

默認(rèn)情況下，開(kāi)發(fā)服務(wù)器 (dev 命令) 運(yùn)行在 development (開(kāi)發(fā)) 模式，而 build 命令則運(yùn)行在 production (生產(chǎn)) 模式。

這意味著當(dāng)執(zhí)行 vite build 時(shí)，它會(huì)自動(dòng)加載 .env.production 中可能存在的環(huán)境變量：

# .env.production
VITE_APP_TITLE=My App

在你的應(yīng)用中，你可以使用 import.meta.env.VITE_APP_TITLE 渲染標(biāo)題。

然而，重要的是要理解 模式 是一個(gè)更廣泛的概念，而不僅僅是開(kāi)發(fā)和生產(chǎn)。一個(gè)典型的例子是，你可能希望有一個(gè) “staging” (預(yù)發(fā)布|預(yù)上線) 模式，它應(yīng)該具有類似于生產(chǎn)的行為，但環(huán)境變量與生產(chǎn)環(huán)境略有不同。

你可以通過(guò)傳遞 --mode 選項(xiàng)標(biāo)志來(lái)覆蓋命令使用的默認(rèn)模式。例如，如果你想為我們假設(shè)的 staging 模式構(gòu)建應(yīng)用：

vite build --mode staging

為了使應(yīng)用實(shí)現(xiàn)預(yù)期行為，我們還需要一個(gè) .env.staging 文件：

# .env.staging
NODE_ENV = production
VITE_APP_TITLE = My App (staging)

現(xiàn)在，你的 staging 應(yīng)用應(yīng)該具有類似于生產(chǎn)的行為，但顯示的標(biāo)題與生產(chǎn)環(huán)境不同。

五、常見(jiàn)配置示例

5.1 開(kāi)發(fā)環(huán)境配置

.env.development 文件，使用 npm run server 時(shí)默認(rèn)會(huì)加載此配置文件

NODE_ENV = "development"  //開(kāi)發(fā)環(huán)境標(biāo)志
VUE_APP_BASE_API = "/xxx_admin_test"  //API基礎(chǔ)路徑變量，此時(shí)為http://localhost:8080/xxx_admin_test
VUE_APP_DOMAIN = "http://localhost:8080"  //域名
VUE_APP_REDIRECT_URL = ""  //ADFS重定向URL，用于OAuth或單點(diǎn)登錄流程中用戶認(rèn)證完成后重定向到這個(gè)URL來(lái)獲得token
VUE_APP_CLIENT_ID = "xxxxxxxxxxxxxxx"  //OAuth客戶端ID，用于OAuth授權(quán)
BASE_URL = ""  //路由基礎(chǔ)路徑，一般為空，表示應(yīng)用的跟路徑

5.2 生產(chǎn)環(huán)境配置

.env.production文件，使用 npm run build 時(shí)默認(rèn)會(huì)加載此配置文件

NODE_ENV = "production"
VUE_APP_BASE_API = "/xxx_admin"
VUE_APP_DOMAIN = "http://xxx.xxx"
VUE_APP_REDIRECT_URL = "http://xxx.xxx/getToken"
VUE_APP_CLIENT_ID = "xxxxxxxxxxxxxxx"
BASE_URL = ""

5.3 測(cè)試環(huán)境配置

NODE_ENV = "test"
VUE_APP_BASE_API = "/xxx_admin_test"
VUE_APP_DOMAIN = "http://xxx.xxxx/xxx_test/"
VUE_APP_REDIRECT_URL = "http://xxx.xxxx/xxx_test/getToken"
VUE_APP_CLIENT_ID = "xxxxxxxxxxxxxxx"
BASE_URL = "/xxx_test"

5.4 其它環(huán)境配置

其他環(huán)境：.env.自定義名稱文件，如云環(huán)境.env.cloud，內(nèi)部測(cè)試環(huán)境.env.bata

六、編寫(xiě)啟動(dòng)命令

注意：除了 .env 文件會(huì)自動(dòng)被加載外，其他環(huán)境需要手動(dòng)的添加加載指令。

添加加載指令:

{
    "name": "xxx",
    "version": "0.1.0",
    "orivate": true,
    "scripts": {
        "serve": "vue-cli-service serve",  //啟動(dòng)項(xiàng)目，使用npm run serve指令自動(dòng)加載.env和.env.development配置文件，所以不用寫(xiě) --mode
        "build": "bie-cli-service build",  //生產(chǎn)環(huán)境打包，使用npm run build指令時(shí)，會(huì)自動(dòng)加載.env和.env.production配置文件
        "lint": "vue-cli-service lint",
        "build:dev": "bie-cli-service build --mode developmemt",  //使用npm run build:dev指令運(yùn)行時(shí)，會(huì)加載.env.developmemt配置文件
        "build:test": "bie-cli-service build --mode test",  //測(cè)試環(huán)境打包
        "build:cloud": "bie-cli-service build --mode cloud",  //云環(huán)境打包
    }
}

七、 獲取環(huán)境變量

7.1 在 js 中訪問(wèn)環(huán)境變量

process.env.xxx 訪問(wèn) .env 文件中的 xxx 變量。

• 在 .env 文件中設(shè)置了變量 VUE_APP_BASE_URL = 'https://www.baidu.com' ，只需要通過(guò) process.env.VUE_APP_BASE_URL就可以獲取到。
• process.env 獲取當(dāng)前環(huán)境變量
• if(process.env.NODE_ENV === “development”)
• const url = VUE_APP_REDIRECT_URL

7.2 在 vue 組件中訪問(wèn)環(huán)境變量

{{ $env.xxx }} ，通過(guò) Vue.js 的 $env 對(duì)象訪問(wèn)環(huán)境變量的所有值

<template>
    <div>
        <p>API Endpoint: {{ $env.VUE_APP_API_ENDPOINT }}</p>
        <p>Log Level: {{ $env.VUE_APP_LOG_LEVEL }}</p>
    </div>
</template>

7.3 在路由中使用環(huán)境變量

路由配置中 base 參數(shù)：base: process.env.BASE_URL

import { createRouter, createWebHistory } from "vue-router";
import Home from "./views/Home.vue";
const routes = [
    { 
        //靜態(tài)路由
        path: '/', 
        name: 'Home', 
        component: Home,
        meta: { title: "HOME" },
    }, {
        //動(dòng)態(tài)路由
        path: '/user/:id',
        name: 'User',
        component: User,
        meta: { title: "USER" },
    }, {
        //嵌套路由
        path: '/dashboard',
        component: Dashboard,
        children: [
        {
            path: '',           //路由為`/dashboard`
            component: Overview,
            meta: { title: "DB" },
        }, {
            path: 'profile',    //路由為`/dashboard/profile`
            component: Profile,
            meta: { requiresAuth: true },
        }, {
            path: 'settings',   //路由為`/dashboard/settings`
            component: Settings,
            meta: { requiresAuth: false },
        } ]
    }
]
const router = createRouter({
    history: createWebHistory(),
    routes，
    base: process.env.BASE_URL,
})
export default router;

到此這篇關(guān)于Vue3+Vite 環(huán)境變量和模式配置詳解的文章就介紹到這了,更多相關(guān)Vue3 Vite 環(huán)境變量?jī)?nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論