在 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 文件中使用
// 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文件后，需要重新启动开发服务器或重新构建项目，新的环境变量才能生效。
