webpack
使用 dotenv 定义并使用 .env 文件中的变量的步骤如下：
-
首先，你需要安装 dotenv。在你的项目根目录下，运行
npm install dotenv。 -
在你的项目根目录下创建一个名为
.env的文件。在这个文件中，你可以定义环境变量。例如：
-
MY_VARIABLE=myValue ANOTHER_VARIABLE=anotherValue -
在你的代码中，你需要在使用任何环境变量之前，导入并配置 dotenv。这样做的目的是让 dotenv 读取
.env文件并将其中定义的变量添加到process.env对象中。 -
require('dotenv').config();这行代码应该放在你的应用的入口文件的顶部（或者至少在你首次访问环境变量之前）。 通常在项目的主文件或者应用程序的入口点调用。这可能是
app.js，index.js，server.js或其他类似的文件，这取决于你的项目结构。 -
一旦 dotenv 配置完成，你就可以在你的代码中使用
process.env对象来访问你在.env文件中定义的环境变量。
console.log(process.env.MY_VARIABLE); // 打印 "myValue"
console.log(process.env.ANOTHER_VARIABLE); // 打印 "anotherValue"
请注意，环境变量是字符串，即使你在 .env 文件中定义它们为数字或布尔值，当你从 process.env 中访问它们时，它们都将是字符串。因此，你可能需要将它们转换为合适的类型。
vite
在 Vite 中，你可以使用 .env 文件来定义环境变量，然后在你的代码中访问这些变量。Vite 支持为不同的环境定义不同的 .env 文件，比如 .env.development，.env.production，.env.test 等等。
例如，你可以创建一个名为.env.development的文件来设置开发环境的环境变量，和一个名为.env.production的文件来设置生产环境的环境变量。当你运行vite或vite build命令时，Vite会根据当前的环境加载相应的.env文件。
以下是如何在 Vite 中使用 .env 文件和访问环境变量的步骤：
- 创建环境文件：在项目根目录下创建一个名为
.env的文件。这个文件会被所有环境共享。如果你希望为特定环境定义特定的环境变量，你可以创建像.env.development或.env.production这样的文件。 - 定义环境变量：在你的
.env文件中，你可以定义环境变量。环境变量应该使用KEY=VALUE的格式定义。例如：
VITE_APP_TITLE=My App
这里的 VITE_ 前缀是必需的，如果你希望这些变量在浏览器中可用。
- 访问环境变量：在你的代码中，你可以使用
import.meta.env来访问环境变量。例如：
console.log(import.meta.env.VITE_APP_TITLE); // 输出 "My App"
- 启动应用：使用
vite或vite build命令启动你的应用。Vite 会自动根据当前环境加载对应的.env文件。
请注意，如果你在 .env 文件中定义的环境变量没有使用 VITE_ 前缀，那么这些变量只能在服务器端的代码中使用，不能在浏览器端的代码中使用。因此，如果你希望你的环境变量在浏览器端的代码中可用，你需要确保它们的名称以 VITE_ 开头。
