vue3使用import.meta.env

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

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

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

訪問環(huán)境變量

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

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

VUE_APP_API_URL=https://myapi.com

你可以在 Vue 3 項目的任何地方訪問這個變量：

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`;

注意事項

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

這是為了確保只有通過 Vue CLI 定義的環(huán)境變量才會被包含在最終的構(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)不同的運行環(huán)境。

import.meta.env報錯：Property ‘env‘ does not exist on type ‘ImportMeta‘

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

問題

代碼提示import.meta中只有url，手動訪問env會報錯：Property 'env' does not exist on type 'ImportMeta'，但是瀏覽器中可以打印。

解決方法

（方法1和方法2在我的項目中有用，方法3和方法4大家說可以，可能是環(huán)境問題，在我的項目中沒有起作用，但是大家說有用，那就記錄下來，以后有機會再試一試）：

1、忽略類型校驗：

//@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é)

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

最新評論