Vite中环境变量管理

最新推荐文章于 2025-06-19 09:37:21 发布

原创最新推荐文章于 2025-06-19 09:37:21 发布 · 624 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript

opensnn 专栏收录该内容

22 篇文章

订阅专栏

Vite中环境变量管理

在Vue 3 项目中使用 Vite 进行构建时，环境变量的管理和使用与 Vue CLI 略有不同。以下是如何在 Vite 项目中使用环境变量的详细步骤。

1. 创建环境变量文件

在项目根目录下创建不同的 .env 文件，这些文件可以根据不同的环境来配置。

.env：适用于所有环境的默认配置。
.env.development：仅适用于开发环境。
.env.production：仅适用于生产环境。

例如：

.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. 访问环境变量

在 Vite 项目中，环境变量可以通过 import.meta.env 来访问。注意：所有自定义环境变量都应该以 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. 在组件中使用环境变量

你可以在 Vue 组件中使用环境变量，通过 setup 函数或 computed 属性来访问这些变量。

在 `setup` 函数中使用：

<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. 使用不同的环境模式

development：vite 或 vite serve 使用。
production：vite build 使用。

你也可以自定义其他模式，例如：

vite build --mode staging

然后创建对应的 .env.staging 文件。

5. 动态使用环境变量

如果你需要在模板中使用环境变量，可以将它们绑定到组件的 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>