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官方也没有提及,不知道稳不稳定,所以也不建议尝试使用。
本文系作者 @木灵鱼儿 原创发布在木灵鱼儿站点。未经许可,禁止转载。
暂无评论数据