在开发与生产版本中自动更改 Vite 代理位置？

Question

在我正在开发的单页应用程序中，我正在使用 Vite，在我的

vite.config.ts

文件中，我有以下代理：

proxy: {
  '/v1': {
    target: 'https://127.0.0.1:8080',
    changeOrigin: true,
    secure: false
  }
}

有没有办法根据是否在生产环境中来改变这个目标？比如：

proxy: {
  '/v1': {
    target: isDev ? 'https://127.0.0.1:8080' : 'https://api.example.com',
    changeOrigin: isDev,
    secure: !isDev
  }
}

也就是说，在我的本地环境中，我想针对本地服务器进行开发，这样我的 fetch API 调用（如

fetch("/v1/get-posts")

）就会转发到

https://127.0.0.1:8080/v1/get-posts

，但在我的生产版本中（我通过

vite build

创建），它们将转发至：

https://api.example.com/v1/get-posts

这可以做到吗？如果可以，怎么做？

Answer 1

开发服务器及其代理配置未捆绑到构建输出中，因此您的目标实际上没有多大意义。但是，从技术上讲，您可以通过

mode

标志在生产模式下运行开发服务器，所以也许这就是您的意思。

在这种情况下，您可以使用条件配置，其中

isDev

将是

mode === 'development'

：

// vite.config.js
import { defineConfig } from 'vite'
import { fileURLToPath } from 'url'
import vue from '@vitejs/plugin-vue'

const defaultConfig = {
  plugins: [vue()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
}

export default defineConfig(({ command, mode }) => {
  if (command === 'serve') {
            👇
    const isDev = mode === 'development'

    return {
      ...defaultConfig,
      server: {
        proxy: {
          '/v1': {
            target: isDev ? 'https://127.0.0.1:8080' : 'https://api.example.com',
            changeOrigin: isDev,
            secure: !isDev
          }
        }
      }
    }
  } else {
    return defaultConfig
  }
})

Answer 2

与create-react-app不同，Vite不提供构建后的代理配置，仅用于开发。

因此，为了支持构建，您必须手动检查环境变量以查看您是在生产还是开发中，如下所示：

例如，这是 redux-toolkit-query 中的 baseUrl 属性，或者 fetch()，甚至 axios()，无论你使用什么

// for example, this is the baseUrl property in redux-toolkit-query, or fetch(), or even axios(), whatever you're using
import.meta.env.MODE === 'development' ? `api/v1` : HOST + '/v1'

假设这是您的 vite.config.js 文件（作为示例，它不必与我的完全一样）：

process.env = { ...process.env, ...loadEnv(mode, process.cwd()) }
return defineConfig({
    plugins: [react()],
    server: {
      proxy: {
        '/api': {
          target: process.env.VITE_mainAPI_host,
          changeOrigin: true,
          rewrite: (path) => path.replace(/^\/api/, ''),