Vue 项目中，.env文件怎么用?

ops/2025/3/11 7:11:33/

在 Vue 项目中，.env 文件用于存储环境变量，不同的环境（如开发环境、测试环境、生产环境）可以使用不同的 .env 文件来管理对应的配置信息。以下是关于 Vue 项目中 .env 文件的详细使用方法：

1. 项目创建

确保你已经使用 Vue CLI 创建了一个 Vue 项目。如果还没有创建，可以使用以下命令创建一个新的 Vue 项目：

vue create my-vue-project
cd my-vue-project

2. `.env` 文件的命名规则

Vue CLI 支持多种 .env 文件命名，以适应不同的环境需求：

.env：所有环境都会加载的通用配置。
.env.development：开发环境（npm run serve）加载的配置。
.env.production：生产环境（npm run build）加载的配置。
.env.test：测试环境加载的配置。

3. 定义环境变量

在相应的 .env 文件中，按照 VUE_APP_ 前缀的格式定义环境变量，例如：

.env.development

VUE_APP_API_BASE_URL = http://localhost:3000/api
VUE_APP_DEBUG = true

.env.production

VUE_APP_API_BASE_URL = https://example.com/api
VUE_APP_DEBUG = false

注意：只有以 VUE_APP_ 开头的变量才会被 Vue CLI 注入到项目中。

4. 在项目中使用环境变量

在 Vue 项目中，可以通过 process.env 对象来访问定义的环境变量。

在 Vue 组件中使用

<template><div><p>API Base URL: {{ apiBaseUrl }}</p><p>Debug Mode: {{ debugMode }}</p></div>
</template><script>
export default {data() {return {apiBaseUrl: process.env.VUE_APP_API_BASE_URL,debugMode: process.env.VUE_APP_DEBUG};}
};
</script>

在 JavaScript 文件中使用

javascript">// src/services/api.js
const apiBaseUrl = process.env.VUE_APP_API_BASE_URL;export function fetchData() {return fetch(`${apiBaseUrl}/data`).then(response => response.json());
}

5. 加载不同环境的配置

根据启动命令的不同，Vue CLI 会自动加载相应的 .env 文件：

开发环境：运行 npm run serve 时，会加载 .env 和 .env.development 文件，.env.development 文件中的配置会覆盖 .env 中同名的配置。
生产环境：运行 npm run build 时，会加载 .env 和 .env.production 文件，.env.production 文件中的配置会覆盖 .env 中同名的配置。

6. 自定义环境

除了默认的开发和生产环境，你还可以自定义环境。例如，创建一个 .env.staging 文件用于预发布环境：

VUE_APP_API_BASE_URL = https://staging.example.com/api
VUE_APP_DEBUG = false

然后，在 package.json 中添加自定义脚本：

{"scripts": {"serve": "vue-cli-service serve","build": "vue-cli-service build","build:staging": "vue-cli-service build --mode staging"}
}

运行 npm run build:staging 时，会加载 .env 和 .env.staging 文件。

7. 注意事项

安全性：不要在 .env 文件中存储敏感信息（如数据库密码、API 密钥等），如果需要存储敏感信息，可以考虑使用环境变量注入或加密存储。
重启服务：修改 .env 文件后，需要重新启动开发服务器或重新构建项目，新的环境变量才能生效。