Vite中環(huán)境變量管理

在Vue 3 項(xiàng)目中使用 Vite 進(jìn)行構(gòu)建時(shí)，環(huán)境變量的管理和使用與 Vue CLI 略有不同。以下是如何在 Vite 項(xiàng)目中使用環(huán)境變量的詳細(xì)步驟嫉沽。

1. 創(chuàng)建環(huán)境變量文件

在項(xiàng)目根目錄下創(chuàng)建不同的 .env 文件落恼，這些文件可以根據(jù)不同的環(huán)境來配置量没。

• .env：適用于所有環(huán)境的默認(rèn)配置慢显。
• .env.development：僅適用于開發(fā)環(huán)境。
• .env.production：僅適用于生產(chǎn)環(huán)境开镣。

例如：

.env

VITE_APP_TITLE=My Vite App

.env.development

VITE_APP_API_URL=http://localhost:3000
VITE_APP_DEBUG=true

.env.production

VITE_APP_API_URL=https://api.example.com
VITE_APP_DEBUG=false

2. 訪問環(huán)境變量

在 Vite 項(xiàng)目中刀诬，環(huán)境變量可以通過 import.meta.env 來訪問。注意：所有自定義環(huán)境變量都應(yīng)該以 VITE_ 前綴開頭邪财。

例如陕壹，在組件或 JavaScript 文件中：

console.log(import.meta.env.VITE_APP_API_URL);
console.log(import.meta.env.VITE_APP_TITLE);
console.log(import.meta);    // 直接打印 import.meta 看一看

3. 在組件中使用環(huán)境變量

你可以在 Vue 組件中使用環(huán)境變量，通過 setup 函數(shù)或 computed 屬性來訪問這些變量卧蜓。

在 setup 函數(shù)中使用：

<template>
  <div>
    <p>API URL: {{ apiUrl }}</p>
    <p>App Title: {{ title }}</p>
  </div>
</template>

<script>
export default {
  setup() {
    const apiUrl = import.meta.env.VITE_APP_API_URL;
    const title = import.meta.env.VITE_APP_TITLE;

    return { apiUrl, title };
  }
}
</script>

在 computed 屬性中使用：

<template>
  <div>
    <p>API URL: {{ apiUrl }}</p>
    <p>App Title: {{ title }}</p>
  </div>
</template>

<script>
export default {
  computed: {
    apiUrl() {
      return import.meta.env.VITE_APP_API_URL;
    },
    title() {
      return import.meta.env.VITE_APP_TITLE;
    }
  }
}
</script>

4. 使用不同的環(huán)境模式

1. development：vite 或 vite serve 使用帐要。
2. production：vite build 使用。

你也可以自定義其他模式弥奸，例如：

vite build --mode staging

然后創(chuàng)建對應(yīng)的 .env.staging 文件榨惠。

5. 動(dòng)態(tài)使用環(huán)境變量

如果你需要在模板中使用環(huán)境變量，可以將它們綁定到組件的 setup 或 data 中：

<template>
  <div>
    <p>API URL: {{ apiUrl }}</p>
    <p>App Title: {{ title }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      apiUrl: import.meta.env.VITE_APP_API_URL,
      title: import.meta.env.VITE_APP_TITLE
    }
  }
}
</script>

總結(jié)

在使用 Vite 的 Vue 3 項(xiàng)目中，環(huán)境變量管理通過 .env 文件和 import.meta.env 進(jìn)行赠橙。確保自定義的環(huán)境變量以 VITE_ 前綴開頭耽装，以便能夠在代碼中正確訪問這些變量。這種方式提供了一個(gè)靈活和簡潔的方法來管理不同環(huán)境下的配置期揪。

官方介紹：https://cn.vitejs.dev/guide/env-and-mode.html

【轉(zhuǎn)載自:】開思通智網(wǎng) ---- “一起來o站掉奄，玩轉(zhuǎn)AGI！”
【官網(wǎng):】https://www.opensnn.com/
【原文鏈接:】https://www.opensnn.com/os/article/10000837

結(jié)束