ESNext Vite项目中使用dotenv遇process.env未定义问题求助

我在ESNext环境的Vite项目中使用dotenv时，遇到了process.env未定义的问题。尝试了dotenv官方文档里的ES6用法，但没有解决：

import * as dotenv from 'dotenv'
dotenv.config()

以下是我的项目组件代码，供参考：

App.tsx #

import './App.css';
import Register from './Register';
import Login from './Login';
import { Routes, Route, Navigate } from 'react-router-dom';
import Todos from './Todos';

function App() {
  return (
    <Routes>
      <Route path="/login" element={<Login />} />
      <Route path="/register" element={<Register />} />
      <Route path="/todos" element={<Todos />} />
      <Route path="*"  element={<Navigate to="/login" />} />
    </Routes>
  );
}

export default App;

context/AuthProvider.tsx #

import { createContext, useState } from "react";
import "dotenv/config.js";
const AuthContext = createContext({});

export const AuthProvider = ({ children }: any) => {
  const [auth, setAuth] = useState('');
  const [url, setUrl] = useState(
    process.env.NODE_ENV === 'production' ? process.env.PROD_URL : process.env.DEV_URL
  );
  return (
    <AuthContext.Provider value={{ auth, setAuth, url }}>
      {children}
    </AuthContext.Provider>
  )
}

export default AuthContext;

Login组件 #

import { useRef, useState, useEffect, useContext } from 'react';
import AuthContext from "./context/AuthProvider";
import { useNavigate, Link, Navigate } from 'react-router-dom';
import axios from './api/axios';
import Cookies from 'js-cookie';

function Login() {
  const { setAuth, url }: any = useContext(AuthContext);
  const userRef = useRef<any>();
  const errRef = useRef<any>();

  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [errMsg, setErrMsg] = useState('');
  const [success, setSuccess] = useState(false);
  const navigate = useNavigate(); 

  useEffect(() => {
    userRef.current.focus();
  }, []);

  useEffect(() => {
    setErrMsg('');
  }, [username, password]);

  const handleSubmit = async (e: any) => {
    e.preventDefault();

    try {
      const response: any = await axios.post('/accounts/login',
        JSON.stringify({ username, password }),
        {
          headers: { 'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*' },
        },
      );

      Cookies.set('token', response.data.token, { expires: 1/24 });

      setUsername('');
      setPassword('');
      setSuccess(true);
      navigate('/todos');
    }
    catch (err: any) {
      console.log(err);
      if (!err?.response) {
        setErrMsg('No Server Response');
      } else if (err.response?.status === 400) {
        setErrMsg('Missing username or password');
      } else if (err.response?.status === 401) {
        setErrMsg('Unauthorized');
      } else {
        setErrMsg('Login Failed');
      }
      errRef.current.focus();
    }
  }

  return (
    <>
      <section>
        <p ref={errRef} className={errMsg ? "errmsg" : "offscreen"} aria-live="assertive">{errMsg}</p>
        <h1>Sign In</h1>
        <form onSubmit={handleSubmit}>
          <label htmlFor="username">Username:</label>
          <input
            type="text"
            id="username"
            ref={userRef}
            autoComplete="off"
            onChange={(e) => setUsername(e.target.value)}
            value={username}
            required
          />

          <label htmlFor="password">Password:</label>
          <input
            type="password"
            id="password"
            onChange={(e) => setPassword(e.target.value)}
            value={password}
            required
          />
          <button>Sign In</button>
        </form>
        <p>
          Need an Account?<br />
          <span className="line">
            <Link to="/register">Sign Up</Link>
          </span>
        </p>
      </section>
    </>
  )
}

export default Login

解决方案 #

Vite内置了环境变量处理机制，不需要额外安装或配置dotenv，直接按以下步骤操作即可：

1. 命名环境变量：在项目根目录创建.env、.env.production等文件，所有自定义环境变量必须以VITE_为前缀，比如：

   # .env（开发环境）
   VITE_DEV_URL=http://localhost:3000/api
   

   # .env.production（生产环境）
   VITE_PROD_URL=https://your-production-domain/api
   

2. 移除dotenv相关代码：删除项目中dotenv的导入语句（比如import "dotenv/config.js"）和依赖包。

3. 修改代码中的变量访问方式：Vite通过import.meta.env注入环境变量，更新AuthProvider.tsx的写法：

   import { createContext, useState } from "react";
   const AuthContext = createContext({});
   
   export const AuthProvider = ({ children }: any) => {
     const [auth, setAuth] = useState('');
     const [url, setUrl] = useState(
       import.meta.env.MODE === 'production' ? import.meta.env.VITE_PROD_URL : import.meta.env.VITE_DEV_URL
     );
     return (
       <AuthContext.Provider value={{ auth, setAuth, url }}>
         {children}
       </AuthContext.Provider>
     )
   }
   
   export default AuthContext;
   

4. 环境模式说明：

   • 执行npm run dev默认使用development模式，加载.env和.env.development；
   • 执行npm run build默认使用production模式，加载.env和.env.production；
   • 可通过--mode参数指定模式，比如npm run build --mode staging。

按照上述步骤操作后，就能正常访问环境变量，解决process.env未定义的问题。

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