在 vue 中如何获取.env.xx 配置文件的值

在 Vue 中获取.env 配置文件的值通常是为了管理不同环境（如开发、测试、生产）的配置。Vue CLI 会自动读取根目录下的 .env 文件，并将其内容加载到 process.env 中。

环境变量定义

  • .env：基础环境变量
  • .env.local：本地覆盖的环境变量，不会被版本控制
  • .env.development：开发环境变量
  • .env.production：生产环境变量

访问方式

在 Vue 组件或 JavaScript 文件中，可以通过以下方式访问：

1
const apiUrl = process.env.VUE_APP_API_URL;

参数说明：

  • VUE_APP_API_URL: 在 .env 文件中定义的变量名。所有自定义的环境变量必须以 VUE_APP_ 前缀开头，才能在代码中访问。

注意点

  • 确保在项目根目录下创建对应的 .env 文件。
  • 修改.env 文件后，需要重启开发服务器以使更改生效。

示例

假设你的 .env 文件内容如下：

1
VUE_APP_API_URL=https://api.example.com

你可以在你的 Vue 组件中这样使用：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<template>
  <div>
    <h1>API URL: {{ apiUrl }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      apiUrl: process.env.VUE_APP_API_URL,
    };
  },
};
</script>

对比不同环境下使用

环境 文件名 使用示例
开发 .env.development process.env.VUE_APP_API_URL
生产 .env.production 同上
本地覆盖 .env.local 同上

通过这种方式，你可以灵活地管理不同环境下的配置，确保代码的一致性和可维护性。