SolidJS项目构建时import.meta.env环境变量报错的解决方法

核心问题分析 #

你遇到的构建报错，本质是Vite对import.meta.env的静态替换规则未被满足：Vite仅支持静态识别以VITE_开头的环境变量，且要求使用静态属性访问语法，动态键名写法会让Rollup无法识别这是环境变量，将其视为未处理的非法语法。

修复步骤 #

1. 严格遵循Vite环境变量命名规则 #

• 自定义环境变量必须以VITE_为前缀（比如VITE_API_BASE_URL），否则Vite会在构建阶段直接忽略该变量。
• 检查.env、.env.production等环境文件，确保变量名无拼写错误。

2. 改用静态属性访问语法 #

Vite的环境变量替换仅支持静态属性访问，将动态键写法替换为静态写法：
原错误写法：

const envValue = import.meta.env["VITE_VARIABLE_NAME"];

修改为：

const envValue = import.meta.env.VITE_VARIABLE_NAME;

3. TypeScript类型声明（可选但推荐） #

在src/vite-env.d.ts中添加类型声明，避免TS语法报错：

/// <reference types="vite/client" />

interface ImportMetaEnv {
  readonly VITE_VARIABLE_NAME: string;
  // 可添加其他自定义环境变量
}

interface ImportMeta {
  readonly env: ImportMetaEnv;
}

4. 排查Vite配置冲突 #

若自定义了vite.config.ts，确保未禁用Vite默认的环境变量替换逻辑，不要手动覆盖define选项中的import.meta.env相关配置：

import { defineConfig } from 'vite';
import solidPlugin from 'vite-plugin-solid';

export default defineConfig({
  plugins: [solidPlugin()],
  // 不要手动修改define里的import.meta.env配置
});

5. 清理缓存后重新构建 #

缓存可能导致旧逻辑残留，执行以下命令清理后再构建：

rm -rf node_modules/.cache
npm run build

验证方式 #

构建完成后，检查dist目录下的打包文件，搜索原变量名，应能看到它已被替换为实际的环境变量值，而非保留import.meta.env的原始语法。

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