Vite 是一个轻量级的前端构建工具，用于创建 fast, small and performant web applications. 其中，Vue 3 提供了非常灵活和强大的 API 来处理复杂的应用程序。然而，在运行时解决环境变量问题始终是一个挑战，特别是当 API 地址是动态生成或需要通过服务端进行调用时。
在 Vite Vue 项目中，我们可能会遇到无法访问到 API 的情况。这可能是由于各种原因，比如服务器未启动、API 错误、网络问题等。在这种情况下，我们需要一种方法来解决这个问题。
Vite Vue3 .env.development 文件是用于开发和测试环境的配置文件，它允许我们将开发中的参数设置存储在系统中，并且可以自动应用到生产部署。然而，在 Vite 中使用这个文件时，我们可能会遇到一个叫做“API Domain 未获取”的问题。这可能是一个由多种因素引起的错误。
为了解决这个问题，我们需要通过代码的方式创建或设置 API 地址作为环境变量。这样，当我们运行应用程序并在不同的环境中（如开发、测试和生产）时，我们可以确保正确地使用正确的 API 地址。下面是一些步骤和代码示例来解释如何实现这一目标：
步骤 1: 创建 .env.development 文件
首先，在项目的根目录中创建一个名为 .env.development 的文件，用于存储应用程序的环境变量。
bash
echo "API_DOMAIN=your-api-domain" > .env.development
这行代码将你的 API 地址 (在这种情况下，为的是模拟开发和测试环境) 写入到 .env.development 文件中。
步骤 2: 配置 Vite Vue3
接下来，在项目中添加 vite.config.js。在配置文件中，我们可以通过修改 module.exports 来定义环境变量，以适应不同的开发、测试和生产模式。
javascript
// vite.config.js
module.exports = {
// 其他配置...
server: {
proxy: true, // 开启代理设置
changeOrigin: true, // 设置是否允许跨域请求
},
resolve: {...}, // 其它配置...
};
步骤 3: 在不同环境中使用不同的 API 地址
- 开发环境 :
- 当你启动项目时，Vite 会自动应用
API_DOMAIN设置，包括你的 API 地址。 - 这些设置将在所有的开发环境中有效。
bash
npm run dev
- 测试环境 :
- 使用同样的
.env.development文件来创建配置。这将允许你只在测试中使用特定的环境变量值。
bash
npm run test
– 生产环境 :
– 如果你在开发环境中启用了代理设置，那么在生产环境下，Vite 仍然会自动应用 API_DOMAIN 设置，但可能需要通过服务端进行调用或处理。在这种情况下，你可能需要在生产环境中手动配置 API 地址。
bash
npm run prod
步骤 4: 确保跨域请求
在使用代理设置时，确保所有跨域请求都遵循 CORS (跨源资源共享) 规则。这可以确保你的应用程序能够访问到服务端提供的数据。
- 在开发环境中:
npm run dev或其他serve命令后，应用会自动启用跨域代理，无需额外配置。- 在测试环境中:
- 使用
npm run test启动应用，并检查所有 API 请求的 CORS 设置是否正确。
“`bash
// 在开发环境中
npm run test
// 在测试环境中
npm run test –cors
“`
步骤 5: 兼容性与安全性
在生产环境中，确保你的 API 地址是正确的并且符合相关的安全策略。例如，使用 HTTPS 网关或代理设置来防止跨站点请求伪造（CSRF）攻击。
通过这些步骤，我们可以在不同的开发、测试和生产环境中正确地配置和使用 API_DOMAIN 来访问到我们的 API 服务器。这不仅提高了应用程序的稳定性和安全性，也为开发者提供了灵活性，可以在不同环境条件下进行快速迭代和部署。