在 typescript 应用程序中使用 vite .env 变量

Question

我正在尝试使用自定义 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

使用

ESNext

，所以我不确定为什么我首先会收到此消息。

附加说明 - 我正在使用来自 Electron Forge 的 Vite + Typescript 模板，所以我不认为更改

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"
  }
}

Answer 1

出现此问题的原因是您设置了： “包含”：[“src”] 正确的设置应该是： “包含”：[“forge.env.d”，“src / ** / *”]

设置 include 属性后，您应该向其中添加 forge.env.d.ts