在开发与生产版本中自动更改 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 标志运行生产模式下的开发服务器，所以也许这就是您的意思。

在这种情况下，您可以使用 conditional config，其中 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
  }
})

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

Change Vite proxy location automatically in dev vs prod builds?

http-proxy

typescript

devops

vite