如何在使用vite时识别typescript中的环境变量？

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 to load env variables vscode时只识别url变量...那么我如何告诉typescript在import.meta中有自定义变量呢？

Answer 1

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

简而言之，您可以像这样创建/src/env.d.ts：

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