Nuxt提供了一个运行时配置API,在你的应用程序和服务器路由中暴露配置,并能在运行时通过设置环境变量进行更新。
定义运行时配置
为了将配置和环境变量暴露给应用程序,你需要在nuxt.config文件中使用runtimeConfig选项定义运行时配置。
export default defineNuxtConfig({
runtimeConfig: {
// 只在服务端可以访问的配置项
apiSecret: '123',
// 可以暴露给客户端使用的配置项
public: {
apiBase: '/api'
}
}
})
需要留意的一点是,默认定义的配置选项都只能在服务端流程中可访问,如果需要在客户端也能使用,需要将配置项定义在public选项内。
配置项定义好后,我们可以使用useRuntimeConfig
Api去获取定义的配置项的值。
<script setup>
const runtimeConfig = useRuntimeConfig()
console.log(runtimeConfig.apiSecret)
console.log(runtimeConfig.public.apiBase)
</script>
<template>
<div>
<NuxtWelcome />
</div>
</template>
使用 Options API 时,我们也可通过 this.$config.public 获取到运行时配置。
配置好后,重新运行一下程序,我们可以在终端控制台以及浏览器的控制台看到打印的配置项。
终端中显示的是服务端执行时候打印的配置,可以看到都成功的获取到了值。
浏览器控制台上打印的是在客户端上执行的结果,可以看到,apiSecret的值为undefined,确实是没有获取到。
序列化
运行时配置在传递给Nitro之前会被序列化。这意味着,任何不能被序列化然后反序列化的东西(如Function、Sets, Maps等),都不应该在nuxt.config中设置。
你可以把这些代码放在Nuxt或Nitro的插件或中间件中,而不是从nuxt.config中把不可序列化的对象或函数传入你的应用程序。
环境变量
提供配置的最常见方法是使用环境变量。
Nuxi CLI 内置支持在开发、构建和生成过程中读取 .env 文件。但是当你运行你构建的服务器时,你的 .env 文件将不会被读取。
运行时配置值在运行时自动替换为匹配的环境变量,但有两个关键要求:
- 您需要的变量必须在您的 nuxt.config 中定义。这可确保任意环境变量不会暴露给您的应用程序代码。
- 只有特别命名的环境变量才能覆盖运行时配置属性。规则是用NUXT_ 开头的大写环境变量,使用 _ 来分隔键和大小写变化。
示例如下:
NUXT_API_SECRET=api_secret_token
NUXT_PUBLIC_API_BASE=https://nuxtjs.org
export default defineNuxtConfig({
runtimeConfig: {
apiSecret: '', // 该项会被 NUXT_API_SECRET 环境变量覆盖
public: {
apiBase: '', // 该项会被 NUXT_PUBLIC_API_BASE 环境变量覆盖
}
},
})
添加完环境变量后,需要重新运行下项目才能生效,重新运行后,再看打印的值。可以发现环境变量获取成功了。
如何区分开发环境和线上环境
Nuxt CLI 在开发模式以及运行 nuxi build 和 nuxi generate 时内置了 dotenv 支持。
除了任何进程环境变量外,如果你在项目根目录下有一个.env文件,它将在构建、开发和生成时自动加载,并且在那里设置的任何环境变量都可以在nuxt.config文件和modules中访问。
如果你想使用不同的文件,例如,使用.env.local或.env.production,你可以在使用nuxi时传递dotenv
标志来实现。例如。
npx nuxi dev --dotenv .env.local
如上所述,这只适用于开发模式以及运行nuxi build和nuxi generate时。
那么我们可以先在根目录下,创建一个.env.local文件,在该文件内覆盖其中一个变量
然后,进入package.json文件,修改dev命令如下:
"scripts": {
"build": "nuxt build",
"dev": "nuxt dev --dotenv .env.local", // 指定启动开发模式时读取的环境变量配置文件
"generate": "nuxt generate",
"preview": "nuxt preview",
"postinstall": "nuxt prepare"
},
修改后,我们重新运行下程序, 可以看到在.env.local中设置的环境变量在开发模式下已经生效。
接下来我们可以再执行npm run generate
命令看看打包时环境变量的读取情况, 可以看到依然是.env中的值,符合我们的预期
结语
博客原创地址:Nuxt3实战系列之配置管理 | imwty
欢迎读者朋友们批评指正。
联系作者:imwty2023(微信),iwhitney@163.com(邮箱)
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。