在TypeScript项目中使用Vite .env变量时VS Code报错求助

我用Electron Forge的Vite + TypeScript模板开发项目，自定义Vite的.env变量时，VS Code弹出报错：

The 'import.meta' meta-property is only allowed when the '--module' option is 'es2020', 'es2022', 'esnext', 'system', 'node16', or 'nodenext'.ts(1343)

The type of import.meta.

If you need to declare that a given property exists on import.meta, this type may be augmented via interface merging.

变量能正常渲染，但想消除这个报错。我的tsconfig.json里target设为ESNext，但module是commonjs，因模板限制没法修改module选项，不清楚报错原因。

相关配置文件 #

tsconfig.json #

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "commonjs",
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "noImplicitAny": true,
    "sourceMap": true,
    "baseUrl": ".",
    "outDir": "dist",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "jsx": "react-jsx"
  },
  "include": ["src"]
}

vite-env.d.ts #

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

interface ImportMetaEnv {
  readonly VITE_APP_NAME: string;
  readonly VITE_APP_VERSION: number;
}

interface ImportMeta {
  readonly env: ImportMetaEnv;
}

package.json #

{
  "name": "template-electron-vite-typescript-python",
  "productName": "template-electron-vite-typescript-python",
  "version": "1.0.0",
  "description": "My Electron application description",
  "main": ".vite/build/main.js",
  "scripts": {
    "start": "npx kill-port 3000 && electron-forge start",
    "package": "electron-forge package",
    "make": "electron-forge make",
    "publish": "electron-forge publish",
    "lint": "eslint --ext .ts,.tsx .",
    "start:vite": "vite",
    "build": "ts-node ./scripts/build.js"
  },
  "keywords": [],
  "license": "MIT",
  "devDependencies": {
    "@electron-forge/cli": "^6.4.1",
    "@electron-forge/maker-deb": "^6.4.1",
    "@electron-forge/maker-rpm": "^6.4.1",
    "@electron-forge/maker-squirrel": "^6.4.1",
    "@electron-forge/maker-zip": "^6.4.1",
    "@electron-forge/plugin-auto-unpack-natives": "^6.4.1",
    "@electron-forge/plugin-vite": "^6.4.1",
    "@types/react": "^18.2.21",
    "@types/react-dom": "^18.2.8",
    "@typescript-eslint/eslint-plugin": "^5.62.0",
    "@typescript-eslint/parser": "^5.62.0",
    "@vitejs/plugin-react": "^4.0.4",
    "autoprefixer": "^10.4.16",
    "electron": "26.1.0",
    "eslint": "^8.48.0",
    "eslint-plugin-import": "^2.28.1",
    "postcss": "^8.4.31",
    "prettier": "^3.0.2",
    "tailwindcss": "^3.3.3",
    "ts-node": "^10.9.1",
    "typescript": "~4.5.4"
  },
  "dependencies": {
    "axios": "^1.5.0",
    "electron-squirrel-startup": "^1.0.0",
    "get-port": "^7.0.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-icons": "^4.11.0"
  }
}

解决方法 #

方法1：添加moduleResolution: bundler（TS 5.0+支持） #

如果能升级TypeScript到5.0及以上，直接在tsconfig.json的compilerOptions中添加：

"moduleResolution": "bundler"

这个选项专为Vite、Webpack这类打包工具设计，能让TS识别打包工具处理的语法（如import.meta），同时保留module: commonjs不影响Electron主进程运行。

方法2：拆分主/渲染进程的tsconfig配置 #

Electron主进程依赖commonjs模块规范，而渲染进程由Vite处理可使用ES模块，可分开配置：

1. 根目录保留原tsconfig.json作为主进程配置
2. 新建tsconfig.renderer.json，内容如下：

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "module": "ESNext",
    "moduleResolution": "node16"
  },
  "include": ["src/renderer"]
}

3. 在Vite配置文件中指定渲染进程的tsconfig：

// vite.config.ts
import { defineConfig } from 'vite';

export default defineConfig({
  // 其他配置...
  esbuild: {
    tsconfigRaw: './tsconfig.renderer.json'
  }
});

这样主、渲染进程各自使用适配的模块规范，既满足Electron要求，又消除import.meta的TS报错。

方法3：声明全局ImportMeta（临时兼容方案） #

安装@types/node：

npm install @types/node --save-dev

修改vite-env.d.ts：

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

declare global {
  interface ImportMetaEnv {
    readonly VITE_APP_NAME: string;
    readonly VITE_APP_VERSION: number;
  }

  interface ImportMeta {
    readonly env: ImportMetaEnv;
  }
}

export {};

通过全局声明让TS忽略模块类型冲突，适合不想调整核心配置的场景。

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