Vite+Vue3生产环境如何配置指定HTTPS地址为API端点？

解决方案：使用Vite环境变量 #

Vite原生支持基于环境模式的变量配置，这是管理不同环境API地址的标准方式，具体步骤如下：

1. 创建环境配置文件
   在项目根目录下创建以下文件：

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

VITE_API_BASE_URL=/api

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

VITE_API_BASE_URL=https://api.myurl.com/api

注意：Vite仅会暴露以VITE_开头的变量到客户端代码中。

2. 修改Axios实例配置
   在你的Axios封装文件中，使用import.meta.env读取环境变量：

import axios from 'axios';

export default () => {
  const instance = axios.create({
    withCredentials: true,
    baseURL: import.meta.env.VITE_API_BASE_URL
  });
  return instance;
};

3. 验证配置效果

• 开发环境：运行vite时，VITE_API_BASE_URL取值为/api，结合你已配置的Vite代理（/api/转发到http://localhost:8081/），请求会正确转发到本地后端服务。
• 生产环境：执行vite build打包时，Vite会自动替换变量为https://api.myurl.com/api，生产环境的前端代码会直接请求该HTTPS API地址。

补充说明 #

• 无需修改现有vite.config.js中的代理配置，它仅作用于开发环境。
• 你的Nginx配置已经正确映射了api.myurl.com到后端服务，生产环境的API请求会正常被Nginx处理。

内容的提问来源于stack exchange，提问作者Tichel