vue3使用import.meta.env

在 Vue 3 中，import.meta.env 提供了一個(gè)機(jī)制來(lái)訪問(wèn)模塊的元信息，包括環(huán)境變量。

這個(gè)特性是 JavaScript 模塊系統(tǒng)的一個(gè)部分，它允許開(kāi)發(fā)者在編寫(xiě)代碼時(shí)獲取到關(guān)于當(dāng)前模塊的信息。

以下是如何在 Vue 3 中使用 import.meta.env 的一些示例：

訪問(wèn)環(huán)境變量

在 .env 文件中定義的環(huán)境變量可以通過(guò) import.meta.env 訪問(wèn)。

例如，如果你有一個(gè) .env 文件，它包含一個(gè)名為 VUE_APP_API_URL 的變量：

VUE_APP_API_URL=https://myapi.com

你可以在 Vue 3 項(xiàng)目的任何地方訪問(wèn)這個(gè)變量：

const apiUrl = import.meta.env.VUE_APP_API_URL;
console.log(apiUrl); // 輸出: https://myapi.com

條件導(dǎo)入

import.meta.env 也可以用來(lái)根據(jù)環(huán)境變量進(jìn)行條件導(dǎo)入。

例如，你可以根據(jù)是否處于生產(chǎn)環(huán)境來(lái)導(dǎo)入不同的模塊：

let logger;
 if (import.meta.env.MODE === 'development') {
   logger = require('./logger.js').default;
 } else {
   logger = require('./logger.prod.js').default;
 }

使用環(huán)境變量作為 URL 路徑

你可以使用環(huán)境變量來(lái)構(gòu)建 URL 路徑，這樣你的應(yīng)用程序就可以根據(jù)不同的環(huán)境連接到不同的后端服務(wù)：

const baseUrl = import.meta.env.VUE_APP_BASE_URL;
const apiUrl = `${baseUrl}/api`;

注意事項(xiàng)

只有以 VUE_APP_ 開(kāi)頭的環(huán)境變量才會(huì)被 Vue CLI 打包到 JavaScript 文件中。

這是為了確保只有通過(guò) Vue CLI 定義的環(huán)境變量才會(huì)被包含在最終的構(gòu)建文件中。

• import.meta.env 中的環(huán)境變量是只讀的，你不能修改它們的值。
• import.meta.env 支持現(xiàn)代 JavaScript 模塊語(yǔ)法，因此在較老的瀏覽器中可能不被支持。確保你的應(yīng)用程序的目標(biāo)瀏覽器環(huán)境支持 ES6 模塊。

通過(guò)使用 import.meta.env，你可以在 Vue 3 應(yīng)用程序中更靈活地處理環(huán)境相關(guān)的配置，使得你的應(yīng)用更容易適應(yīng)不同的運(yùn)行環(huán)境。

import.meta.env報(bào)錯(cuò)：Property ‘env‘ does not exist on type ‘ImportMeta‘

用vite創(chuàng)建vue3項(xiàng)目疊加ts，訪問(wèn)import.meta中的變量。

問(wèn)題

代碼提示import.meta中只有url，手動(dòng)訪問(wèn)env會(huì)報(bào)錯(cuò)：Property 'env' does not exist on type 'ImportMeta'，但是瀏覽器中可以打印。

解決方法

（方法1和方法2在我的項(xiàng)目中有用，方法3和方法4大家說(shuō)可以，可能是環(huán)境問(wèn)題，在我的項(xiàng)目中沒(méi)有起作用，但是大家說(shuō)有用，那就記錄下來(lái)，以后有機(jī)會(huì)再試一試）：

1、忽略類型校驗(yàn)：

//@ts-ignore
console.log('vite', import.meta.env)

2、使用類型斷言：

console.log('vite', (import.meta as any).env)

3、在tsconfig.json下的compilerOptions中

增加："types'': [''vite/client'']

{
  "compilerOptions": {
    "types": ["vite/client"],
  }
}

4、在.d.ts文件中聲明模塊：

declare interface ImpoertMetaEnv {
  readonly MODE: string
  // readonly VITE_BASE_URL: string
  // readonly VITE_TIME_OUT: number
}
 
declare interface ImpoertMeta {
  readonly env: ImpoertMetaEnv
}

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論