Nuxt3 环境变量配置

前言

Nuxt3的环境变量配置有点和平时vue项目的不同，它为了考虑服务端渲染和客户端渲染两种情况，以及安全相关的考量，它的环境变量用起来会有点繁琐。

在官方的预设中，你可以使用.env这个文件名的环境变量文件，但是它只会在开发中使用，并不会在构建生产的时候使用，所以我的建议就是放弃使用.env文件名，转而使用指定具体文件的形式。

但是即便我们指定了环境变量文件，它也不会出现在Nuxt提供的useRuntimeConfig配置composable中，考虑到安全，我们在服务器渲染时可能有部分环境变量不能出现在客户端中，以防有人恶意获取从而产生破坏。

所以nuxt并没有一股脑的把环境变量挂载上去，而是需要我们自己手动的去配置，这也是我说的繁琐的地方。

注意：

nuxt3中composable是类似vue3的composition API的，它虽然要求是use开头，但是它和hooks不一样，hooks只能在组件的script中使用，而composable可以在ts或者js文件中使用，更加泛用。

教程

runtimeConfig如何配置和使用

在Nuxt3项目中的nuxt.config.ts文件中，有一个runtimeConfig的配置，用于配置运行时的环境变量。

nuxt.config.ts

export default defineNuxtConfig({
  runtimeConfig: {
    // 这个属性只能在服务端获取到
    apiSecret: '123',
    // public对象中的属性，服务端和客户端都能获取到
    public: {
      apiBase: '/api'
    }
  }
})

使用该配置：

<script setup lang="ts">
const runtimeConfig = useRuntimeConfig()

console.log(runtimeConfig)
</script>

如果你在服务端打印runtimeConfig，得到如下：

{
  apiSecret: '123',
  public: {
    apiBase: '/api'
  }
}

在客户端（浏览器）打印：

{
  public: {
    apiBase: '/api'
  }
}

好了，现在我们使用上知道怎么回事了，我们看看如何实现指定环境变量文件。

指定具体环境变量文件

nuxt要求环境变量的开头必须是以：NUXT_的才会获取，这点和vite大相径庭。

我们创建两个环境变量文件：

• .env.development 用于开发时使用
• .env.production 用于生产环境使用

都填写对应的内容：

# API地址
NUXT_API_URL="http://localhost:3000"

当然你可以自己根据情况自由调整。

然后我们找到package.json文件的两个命令：build和dev，调整如下：

{
  "scripts": {
    "build": "nuxt build --dotenv .env.production",
    "dev": "nuxt dev --dotenv .env.development"
  }
}

nuxt自己内置的dotenv的依赖，所以我们直接使用即可，通过指定具体的文件名就能在对应的命令中使用相应的环境变量。

接着我们就可以通过process.env对象，拿取到NUXT_API_URL变量，但是需要注意，这是node的内置对象，所以它不会有对应的类型提示，如果你想要在使用process.env.xxx的时候，获得属性提示，可以参考本人的另一篇文章：《 如何声明一个NodeJs服务的环境变量类型ProcessEnv声明》，自己在我博客内搜索即可。

自己配置运行时的环境变量

打开_nuxt.config.ts_文件

export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      apiBase: process.env.NUXT_API_URL
    }
  }
})

目前终极方案就是这样了，稍微繁琐一些。

我看有人还使用了VITE_XXX的方式去定义环境变量，这样就可以通过import.meta.env来获取了，但是这个相关内容nuxt官方也没有提及，不知道稳不稳定，所以也不建议尝试使用。