Quartz 4

Vite 项目中的代理配置与环境变量管理

6 min read

Vite 项目中的代理配置与环境变量管理

概述

在前端开发过程中，我们经常需要与后端服务进行交互。然而，由于前后端分离的架构设计，前端在开发阶段常常会遇到跨域问题。Vite 提供了强大的代理功能，允许我们在开发时将 API 请求代理到后端服务，同时还能动态配置不同环境下的代理规则。本文将详细介绍如何在 Vite 项目中配置和管理代理功能，以及如何与环境变量结合以实现更灵活的配置管理。

环境变量的配置

为了能够在不同的环境中使用不同的代理配置，我们首先需要定义环境变量。环境变量将帮助我们为开发、测试、生产等不同环境配置不同的 API 基础 URL 和端口号，并定义代理规则。

1. 定义环境变量

我们可以在一个单独的 env.js 文件中维护环境变量。以下是一个包含多个环境配置的示例：

/**
 * @typedef {Object} EnvironmentConfig
 * @property {string} VITE_API_BASE_URL - API 基础 URL
 * @property {number} VITE_PORT - 应用端口
 * @property {string} OTHER_VARIABLE - 其他变量
 * @property {string} VITE_NAME - 环境名称
 * @property {string} VITE_APP_ENV - 应用环境标识
 * @property {Object} proxy - 代理配置
 */
 
/**
 * 应用环境配置
 * @type {{development: EnvironmentConfig, staging: EnvironmentConfig, production: EnvironmentConfig}}
 */
 
const env = {
  development: {
    VITE_API_BASE_URL: 'https://dev.api.yourservice.com',
    VITE_PORT: 3000,
    OTHER_VARIABLE: 'value_for_dev',
    VITE_NAME: 'dev环境',
    VITE_APP_ENV: 'dev',
    proxy: {
      '/api': {
        target: 'https://dev.api.yourservice.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ''),
      }
    }
  },
  staging: {
    VITE_API_BASE_URL: 'https://staging.api.yourservice.com',
    VITE_PORT: 3001,
    OTHER_VARIABLE: 'value_for_staging',
    VITE_NAME: 'staging环境',
    VITE_APP_ENV: 'staging',
    proxy: {
      '/api': {
        target: 'https://staging.api.yourservice.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ''),
      }
    }
  },
  production: {
    VITE_API_BASE_URL: 'https://api.yourservice.com',
    VITE_PORT: 3002,
    OTHER_VARIABLE: 'value_for_production',
    VITE_NAME: 'prod环境',
    VITE_APP_ENV: 'prod',
    proxy: {
      '/api': {
        target: 'https://api.yourservice.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ''),
      }
    }
  },
 
  // Add more environments as needed
};
 
export default env;

2. 在 Vite 配置文件中应用代理配置

一旦环境变量定义完毕，我们需要在 Vite 的配置文件中加载相应的环境变量，并将代理配置传递给 Vite 的 server.proxy 选项。

以下是完整的 Vite 配置文件示例：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { resolve } from 'path'
import envConfig from './env';
import autoImportStyles from './plugin/vite-plugin-auto-import-styles';
import viteCustomStartupInfo from './plugin/vite-custom-startup-info'; // 导入自定义插件
 
export default defineConfig(({ mode }) => {
  // 加载环境变量
  const env = envConfig[mode];
 
  return {
    plugins: [
      react(),
      autoImportStyles(),
      viteCustomStartupInfo()
    ],
    server: {
      host: '0.0.0.0',
      port: parseInt(env.VITE_PORT, 10),
      proxy: env.proxy // 传入代理配置
    },
    presets: ["@babel/preset-react"],
    define: {
      'process.env': env
    },
    esbuild: {
      loader: 'jsx',
      include: /src\/.*\.jsx?$/, // 正则表达式来匹配 .js 和 .jsx 文件
    },
    resolve: {
      alias: {
        "@": resolve(__dirname, 'src'), // 路径别名
      },
    },
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: `
            @import "@/assets/scss/variables.scss";
            @import "@/assets/scss/utils.scss";
          `
        }
      }
    }
  };
});

代理功能的作用与好处

代理的作用

在开发过程中，前端通常需要与后端 API 进行通信。如果前端应用和后端 API 服务不在同一个域中，浏览器会因为同源策略而阻止跨域请求。代理功能允许我们将前端的 API 请求转发到后端服务器，以绕过跨域问题。通过代理，前端请求实际上是发送到本地开发服务器，然后由该服务器代理到后端服务器。

代理的好处

  1. 解决跨域问题：代理能够避免跨域问题，让前后端开发更加顺畅。

  2. 环境隔离：不同的环境（如开发、测试、生产）可能需要不同的 API 服务器地址，通过环境变量与代理配置的结合，可以轻松实现环境隔离。

  3. 便于调试：在本地开发时，代理可以将请求转发到 Mock 服务器，便于调试。

  4. 提高安全性：通过代理隐藏实际的后端 API 地址，增加了一层安全防护。

总结

在 Vite 项目中使用代理配置结合环境变量的方式，可以大大简化前后端交互中的跨域问题，并提供了灵活的配置管理。通过以上的配置，我们可以确保在不同环境下使用不同的代理规则，实现了前端开发中的环境隔离和便捷调试。

这个方案适用于大部分的前后端分离项目，是前端工程化中的一项重要技术。希望本文对你在 Vite 项目中的代理配置有所帮助。

Graph View