在 dev 与 prod 构建中自动更改 Vite 代理位置？答案

【问题标题】：Change Vite proxy location automatically in dev vs prod builds?在 dev 与 prod 构建中自动更改 Vite 代理位置？
【发布时间】：2022-09-30 01:17:28
【问题描述】：

在我正在开发的单页应用程序中，我正在使用 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

可以做到这一点，如果可以，怎么做？

标签： typescript devops http-proxy vite

【解决方案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
  }
})

【讨论】：

@JamesP 实际上，在某些生产环境中可能不建议托管 Vite 服务器。可以通过多种方式设置代理，但您选择的解决方案可能取决于您的应用程序的托管方式。如果您无法控制主机或代理设置（例如，在 GitHub 上托管），则无法在该主机上设置自己的代理。否则，如果您在自定义服务器上，您可以设置与您的应用程序相邻的任何代理服务器（例如，nginx、express、koa 等）。

【解决方案2】：

我有同样的问题。我的代理适用于开发，但不适用于构建。此功能仅适用于开发人员还是我遗漏了什么？

return defineConfig({

 server: {
      proxy: {
           "^/api/.*": {
                target: process.env.VITE_API_URI,
                changeOrigin: true,
                secure: false,
                rewrite: (path) => path.replace(/^/api/, "/api"),
           },
      },
 open: true,
 https: false
}

【讨论】：