导入
将调查API的URL添加到环境变量中
学习如何使用 Nuxt 的“runtimeConfig” API 设置环境变量。
环境变量
为了确保应用程序在不同环境中使用各自独立的服务,我们需要通过环境变量将调查 API 的 URL 传递给应用。这样可以在不修改应用代码的情况下,实现配置值的热切换。
可以通过在应用根目录下的 .env 文件中定义变量及其对应值来设置环境变量。为了让这些变量在整个应用中可用,Nuxt 提供了 runtimeConfig API,可以在 Nuxt 配置文件中进行设置,并通过 useRuntimeConfig 方法访问这些变量。
No configuration found for ID: 99f241d09019dab899d4ccb98e1663c86291b58855a65e0aca1b06541f6c8124
上述单页应用展示了如何在 .env 文件中声明环境变量,由 nuxt.config.ts 文件中的 runtimeConfig 消费,并在 Nuxt 应用的所有 API 接口端点中使用。
总结
本节中,我们实现了通过环境变量动态配置 API URL 的功能。这样可以轻松地为每个环境自定义 API 地址。例如,本地环境的 .env 文件中的 SURVEY_API_URL 变量可设为 http://localhost:8003,而生产环境则将其设为 https://WEBSERVICE.com。该值可在不修改代码的前提下随时更改。