TypeScript无法识别@rollup/plugin-replace替换的变量如何解决？

这个错误是TypeScript静态检查阶段无法感知编译期通过@rollup/plugin-replace注入的全局变量导致的，按以下步骤解决即可：

方案1：直接声明全局变量（最快适配现有写法） #

• 在项目src目录下新增global.d.ts类型声明文件（如果已存在该文件直接追加内容即可），写入如下代码：

declare const DATABASE_URL: string;

• 检查项目根目录的tsconfig.json，确保include配置项包含了你新增的声明文件，示例配置：

{
  "compilerOptions": {
    // 其余原有配置保持不变
  },
  "include": ["src/**/*", "src/**/*.d.ts"]
}

配置完成后重启TypeScript服务即可消除报错。

方案2：更规范的环境变量写法（推荐） #

你也可以把注入变量挂载到标准的import.meta.env命名空间下，避免污染全局作用域：

1. 修改@rollup/plugin-replace配置，替换键名改为import.meta.env.DATABASE_URL：

replace({
  preventAssignment: true,
  'import.meta.env.DATABASE_URL': JSON.stringify(process.env.SUPABASE_URL),
})

2. 在src/vite-env.d.ts（无该文件则新建）中追加类型声明：

interface ImportMetaEnv {
  readonly DATABASE_URL: string
}

interface ImportMeta {
  readonly env: ImportMetaEnv
}

3. 代码中使用import.meta.env.DATABASE_URL访问变量即可。

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