reactjs 使用vite时如何识别typescript中的env变量？

jyztefdp 于 2023-01-02 发布在 React

关注(0)|答案(2)|浏览(231)

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在 meta中有自定义变量呢？

reactjs

来源：https://stackoverflow.com/questions/67060543/how-to-recognize-env-variables-in-typescript-when-using-vite

2条答案

按热度按时间

ie3xauqp1#

Maybe this is what you want 智能提示, but only Chinese website has the section now.
总之，可以这样创建/src/env.d.ts：

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

赞(0）回复(0）举报 2023-01-02

f1tvaqid2#

就像你通常在react project中所做的那样，在你的根项目中创建.env文件，并把.env放在.gitignore中，这样你就不会错误地把重要的数据推到git上。
接下来要做的是用前缀VITE而不是REACT_APP定义变量，如下所示

VITE_BASE_URL=http://localhost:7000
VITE_DB_PASSWORD=123

定义完环境变量后，可以在项目中使用它们，如下所示

export const BASE_URL = `${import.meta.env.VITE_BASE_URL}/api`

运行项目，它应该是工作，否则停止服务器和重新启动，它应该解决您的问题。
如果您认为您问题仍然没有解决，您应该检查vite docs：https://vitejs.dev/guide/env-and-mode.html

赞(0）回复(0）举报 2023-01-02

我来回答

reactjs 使用vite时如何识别typescript中的env变量？

2条答案

相关问题

热门标签

最新问答