根据环境的不同来动态设置请求 baseUrl配置。

根据环境的不同来动态设置请求 baseUrl配置。

1. 创建环境变量文件

在项目根目录下创建 .env.development 和 .env.production 文件。

.env.development 文件内容：

VUE_APP_BASE_URL = http://development-api.example.com

.env.production 文件内容：

VUE_APP_BASE_URL = http://production-api.example.com

2. 配置 axios(或者其他请求工具) 的 baseUrl

注意: 在Vue2和Vue3中获取环境变量的方法有所不同

• 在Vue2（Webpack、Vue CLI等构建工具）中通过 process.env 提供环境变量。

baseURL: process.env.VUE_APP_BASE_URL

• 在 Vue3（Vite 项目）中，import.meta.env 是访问环境变量的标准方式。(下面的示例以Vue3为例子)

baseURL: import.meta.env.VUE_APP_BASE_URL

在 src 目录下创建一个 utils 文件夹，并在其中创建一个 request.js 文件。

import axios from 'axios';

const service = axios.create({
    baseURL: import.meta.env.VUE_APP_BASE_URL,
    timeout: 5000
});

export default service;

3. 在组件中使用

在组件中引入并使用这个 service 实例。

<template>
  <div>
    <!-- 组件内容 -->
  </div>
</template>

<script setup>
import service from '@/utils/request';

const fetchData = async () => {
  try {
    const response = await service.get('/api/data');
    console.log(response.data);
  } catch (error) {
    console.error(error);
  }
};

fetchData();
</script>

这样，在开发环境和生产环境中，请求的 baseUrl 会根据环境变量自动切换。

使用场景

在Vue2中

• 开发环境：运行 npm run serve 时，Vue CLI 会加载 .env.development 文件中的变量。
• 生产环境：运行 npm run build 时，Vue CLI 会加载 .env.production 文件中的变量。

在Vue3中

• 开发环境：运行 npm run dev 时，Vite 会加载 .env.development 文件中的变量。
• 生产环境：运行 npm run build 时，Vite 会加载 .env.production 文件中的变量。