uni-app vite-ts模板使用‘dev:h5’命令启动后，在代码中获取.env.development文件预设的变量失败

在使用 uni-app 和 vite-ts 模板时，如果你在 .env.development 文件中预设了环境变量，但在代码中无法获取到这些变量，可能是因为以下原因：

1. 确保 .env.development 文件路径正确

确保 .env.development 文件位于项目的根目录下。

2. 环境变量命名规范

Vite 要求环境变量名必须以 VITE_ 开头。例如，如果你在 .env.development 中定义了一个变量，它应该像这样：

VITE_API_URL=https://api.example.com

3. 在代码中访问环境变量

在代码中，你可以通过 import.meta.env 来访问这些环境变量。例如：

const apiUrl = import.meta.env.VITE_API_URL;
console.log(apiUrl); // 应该输出 https://api.example.com

4. 确保环境变量被正确加载

确保你在启动项目时使用了正确的命令。例如，dev:h5 命令应该会加载 .env.development 文件中的变量。

5. 检查 Vite 配置文件

如果你有自定义的 Vite 配置文件（如 vite.config.ts），确保没有覆盖或错误配置环境变量的加载方式。

6. 重启开发服务器

有时候，修改 .env.development 文件后，需要重启开发服务器才能使更改生效。

7. 检查环境变量的使用范围

如果你在某些特定的环境下（如 uni-app 的 vue 组件中）无法访问到环境变量，可能是因为 uni-app 的编译环境与 Vite 的环境变量加载方式不完全一致。你可以尝试在 vite.config.ts 中手动注入环境变量。

示例代码

假设你的 .env.development 文件内容如下：

VITE_API_URL=https://api.example.com

在代码中访问：

const apiUrl = import.meta.env.VITE_API_URL;
console.log(apiUrl); // 应该输出 https://api.example.com

8. 使用 dotenv 手动加载（可选）

如果你仍然遇到问题，可以尝试使用 dotenv 手动加载环境变量：

npm install dotenv --save

然后在项目的入口文件（如 main.ts）中手动加载：

import dotenv from 'dotenv';

dotenv.config({ path: '.env.development' });

console.log(process.env.VITE_API_URL); // 应该输出 https://api.example.com