使用vite-plugin-api-routes导致Vite生产构建失败求助

我们团队维护小型UI框架，用Vite搭建文档站点，引入vite-plugin-api-routes来做上传组件的测试API。开发环境执行vite命令完全正常，但执行vite build生产构建时触发报错：

vite v5.1.4 building for production...
✓ 556 modules transformed.
computing gzip size (2)...vite v5.1.4 building SSR bundle for production...
✓ 0 modules transformed.
x Build failed in 2ms
x Build failed in 2.20s
error during build:
Error: [vite-plugin-rest-api] [vite:define] Transform failed with 3 errors:
error: Invalid define value (must be an entity name or valid JSON syntax): ..
error: Invalid define value (must be an entity name or valid JSON syntax): /
error: Invalid define value (must be an entity name or valid JSON syntax): /api
file: /Users/.../ui-library/packages/ui-docs/.api/server.js
file: /Users/.../ui-library/packages/ui-docs/.api/server.js
    at failureErrorWithLog (/Users/.../ui-library/node_modules/esbuild/lib/main.js:1651:15)

排查发现问题和Vite的import.meta.env相关，我们采用npm workspaces monorepo架构，只要在插件配置里使用import.meta.env就会触发构建失败。以下是可行的解决思路：

• 手动注入环境变量替代import.meta.env
  在vite.config.js中通过define选项直接注入环境变量，绕过插件对import.meta.env的错误转换：

  export default defineConfig({
    define: {
      'process.env.API_PREFIX': JSON.stringify(process.env.VITE_API_PREFIX || '/api'),
    },
    plugins: [
      apiRoutes({
        prefix: process.env.API_PREFIX
      })
    ],
    // 其他Vite配置
  })
  

• 针对生产环境单独配置插件
  插件在SSR构建阶段对环境变量的处理存在问题，可区分开发/生产环境做差异化配置：

  import { defineConfig } from 'vite'
  import apiRoutes from 'vite-plugin-api-routes'
  
  export default defineConfig(({ mode }) => {
    return {
      plugins: [
        apiRoutes({
          prefix: mode === 'production' 
            ? '/api' // 生产环境直接写死或用process.env注入的值
            : import.meta.env.VITE_API_PREFIX || '/api'
        })
      ],
      // 其他配置
    }
  })
  

• 替换为兼容性更好的API插件
  如果上述方法无效，可换用更稳定的方案：

  • 使用@hono/vite快速搭建轻量API，对Vite 5和monorepo支持更友好
  • 开发环境用Vite的server.proxy转发请求，生产环境单独启动Node服务提供测试API
  • 用vite-plugin-ssr自定义API路由逻辑

• 确保monorepo环境变量传递正常
  在npm workspaces结构下，子包可能无法直接读取根目录的环境变量，可在子包的package.json中显式传递：

  {
    "scripts": {
      "build": "VITE_API_PREFIX=/api vite build"
    }
  }
  

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