在vue3中使用import.meta.env

更新時(shí)間：2024年05月08日 11:21:04 作者：夢(mèng)里是誰N

這篇文章主要介紹了在vue3中使用import.meta.env方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

vue3使用import.meta.env

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

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

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

訪問環(huán)境變量

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

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

VUE_APP_API_URL=https://myapi.com

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

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

條件導(dǎo)入

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

例如，你可以根據(jù)是否處于生產(chǎn)環(huán)境來導(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)境變量來構(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_ 開頭的環(huán)境變量才會(huì)被 Vue CLI 打包到 JavaScript 文件中。

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

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

通過使用 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，訪問import.meta中的變量。

問題

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

解決方法

（方法1和方法2在我的項(xiàng)目中有用，方法3和方法4大家說可以，可能是環(huán)境問題，在我的項(xiàng)目中沒有起作用，但是大家說有用，那就記錄下來，以后有機(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
}