vue项目配置 测试 生产 线上环境

在您的 Vue.js 项目根目录下，可以创建以下文件：

.env.development：用于开发环境的配置

.env.production： 用于线上环境的配置

.env.test：            用于测试环境的配置

1.配置

.env.development：

VUE_APP_API_BASE_URL=http://localhost:3000

VUE_APP_API_KEY=your-api-key-dev

.env.production：

VUE_APP_API_BASE_URL=https://api.example.com

VUE_APP_API_KEY=your-api-key-prod

.env.test：

VUE_APP_API_BASE_URL=https://test-api.example.com

VUE_APP_API_KEY=your-api-key-test

2.使用环境变量

在 Vue.js 的组件中，您可以使用 process.env.VUE_APP_* 来访问相应的环境变量。例如：

const apiUrl = process.env.VUE_APP_API_BASE_URL;
const apiKey = process.env.VUE_APP_API_KEY;

根据不同的构建命令，Vue.js 会自动加载相应的环境配置文件。例如，在开发环境中运行 npm run serve 时，Vue.js 会加载 .env.development 文件中的配置项。

当您构建生产环境时，使用 npm run build 或相关的构建命令，Vue.js 会加载 .env.production 文件中的配置项。

对于测试环境，您可以自行定义测试相关的构建命令，并在对应的构建命令中加载 .env.test 文件中的配置项。

请确保在使用环境变量之前，重新启动开发服务器或重新构建 Vue.js 项目，以使环境变量生效!!!!!!

请确保在使用环境变量之前，重新启动开发服务器或重新构建 Vue.js 项目，以使环境变量生效!!!!!!

请确保在使用环境变量之前，重新启动开发服务器或重新构建 Vue.js 项目，以使环境变量生效!!!!!!