Nuxt3环境变量配置

Nuxt3 正式发布还不到半年，在投入生产环境使用后，遇到了不少问题，很难找到合适的解决方案，其中环境变量配置就是其中一个，之前一直未能解决，最近要上持续集成，无法绕过这个问题，所以花了点时间研究了一下，最终找到了解决方案，记录一下。

官方文档

面对一个新框架，我们自然是希望官方文档能够详细地说明使用方式，最初开始使用的时候，并没有关于环境变量配置的说明，甚至可能没有相关功能，不过随着版本的更新，文档中添加了相关的内容，但是安装文档的说明进行配置后并没有生效，后来发现有些是理解偏差，另外还有一些问题我仍然没有解决，不过目前的配置方式已经满足我们的需求，所以这里记录一下研究配置的过程。

关于配置的官网文档： Runtime Config

用于持续集成的命令： nuxi build

环境变量文件的说明： .env

配置文件说明： Nuxt Config

基础变量配置

最开始我按照官方文档的说明将环境变量配置在了 nuxt.config.ts 文件中，使用起来还是很简单的。

// nuxt.config.ts
runtimeConfig: {
   
  apiKey: ""; // Default to an empty string, automatically set at runtime using process.env.NUXT_API_KEY
  public: {
   
    baseURL: ""; // Exposed to the frontend as well.
  }
}

// 使用
const config = useRuntimeConfig();
const baseUrl = config.public.baseUrl;

需要暴露在前端的变量写在 public 中，不需要暴露的直接写在 runtimeConfig 下，调用也很方便，但是作为环境变量，仅满足一种环境肯定是不行的，最初我是通过 process.env.NODE_ENV 来判断当前环境，然后根据环境来配置不同的变量，然而上线之后遇到了一个问题，测试环境和正式环境的 NODE_ENV 都是 production ，这样就导致了无法区分环境，所以在很长一段时间内，我都是通过手动修改 nuxt.config.ts 文件来切换环境，这样的方式肯定是不行的，所以我开始寻找解决方案。

.env 文件配置

参考 Vue Cli 项目，每次执行 run build 的时候，自动读取对应的 .env 文件中的变量进行编译，这样就是我的理想情况，而且我发现官方的文档中后来确实新增了相关的内容，我就想当然地进行了配置，结果却没有生效。