vue 设置生产 开发 测试环境

在 Vue.js 中，可以通过配置不同的环境变量来区分生产、开发和测试环境的请求。一般情况下，我们使用 webpack 或 Vite 进行构建，它们都支持环境变量的配置。

以下是如何在 Vue 项目中配置不同环境的请求：

1. 配置 .env 文件

在项目根目录下，你可以为不同的环境配置不同的 .env 文件。

• 开发环境： .env.development
• 生产环境： .env.production
• 测试环境： .env.test

这些文件可以包含不同的环境变量，比如 API 请求的 URL。

示例：

• .env.development（开发环境）：

  VUE_APP_API_URL=https://dev-api.example.com
  

• .env.production（生产环境）：

  VUE_APP_API_URL=https://api.example.com
  

• .env.test（测试环境）：

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

在这些文件中，你可以根据需要定义任何你希望在不同环境下使用的变量。

2. 使用环境变量

你可以通过 process.env 访问这些环境变量。例如，在 Vue 项目的 API 请求配置中，可以动态设置基础 URL。

const apiUrl = process.env.VUE_APP_API_URL;

这样，你就可以根据不同的环境自动选择正确的 API 地址。

3. 使用 Vue 配置文件中的环境

如果你使用 Vue CLI（Webpack 配置），你可以在 vue.config.js 中通过 process.env.NODE_ENV 来区分不同的环境。

module.exports = {
  devServer: {
    proxy: process.env.NODE_ENV === 'development' ? 'http://dev-server.com' : 'http://prod-server.com',
  }
}

4. 在代码中根据环境区分

如果你需要根据环境来做一些不同的请求配置，可以直接在代码中进行判断：

const apiUrl = process.env.NODE_ENV === 'production'
  ? 'https://api.example.com'
  : 'https://dev-api.example.com';

axios.get(`${apiUrl}/endpoint`).then(response => {
  // 处理响应
});

5. 启动不同的环境

• 开发环境：npm run serve 或 yarn serve，这将使用 .env.development 中的配置。
• 生产环境：npm run build 或 yarn build，这将使用 .env.production 中的配置。
• 测试环境：你可以通过自定义命令和配置文件来进行构建。

总结

通过以上步骤，你可以根据不同的环境（开发、生产、测试）配置不同的 API 请求 URL 和其他环境变量，确保代码在不同环境下的灵活配置和运行。