reactjs - 使用 vite 时如何识别打字稿中的环境变量？

Question

export const EnvironmentProvider: React.FC<EnvironmentProps> = ({ children }) => (
  <EnvironmentContext.Provider value={{
    APP_NAME: import.meta.env.VITE_APP_NAME, 
    GQL_URI: import.meta.env.VITE_GQL_URI
  }}>
    { children }
  </EnvironmentContext.Provider>
)

当使用import.meta 加载 env 变量时， vscode 只识别 url 变量......那么我如何告诉 typescript 在 import.meta 中有自定义变量？

Answer 1

也许这就是你想要的智能提示，但现在只有中文网站有这个部分。

总之，你可以/src/env.d.ts这样创建：

interface ImportMetaEnv {
  VITE_APP_NAME: string;
  VITE_GQL_URI: string;
  // others...
}