用户登录

在 Nuxt 项目里可以使用应用配置,就是使用在 app.config 里定义的配置,在这里定义的都是公开的配置。我们也可以在 Nuxt 项目的配置里,在 runtimeConfig 里添加一些配置,这些配置可以用在服务端也可以选择定义公开的配置,另外这些配置可以用环境变量覆盖掉。

打开项目根目录下的 nuxt.config.ts ,在这个对象里添加一个 runtimeConfig,它是一个对象,在它里面直接添加的就是私有配置,如果要定义公开的配置,可以把它们放在 public 这个属性里面,它又是一个对象,这个对象里的东西就是公开的配置。

比如添加一个 apiBaseUrl,它的值是后端应用接口的基本地址,https://nid-node.ninghao.co

在项目里使用 runtimeConfig 可以用一下 useRuntimeConfig 这个组合,打开之前我们定义的 useApiFetch 这个组合,在里面解构一下使用 useRuntimeConfig 返回的结果,它返回的东西就是项目配置里的 runtimeConfig,先把 public 解构出来,然后再把它里面的 apiBaseUrl 解构出来。

在控制台上输出的内容里面,可以加上这个 apiBaseUrl 的值。

在浏览器,观察一下控制台,现在打开内容列表页面在控制台上输出的这行文字里面,会包含在 runtimeConfig 里的 public 里面定义的 apiBaseUrl 这个公开的配置的值。

runtimeConfig 里的配置会被环境变量覆盖掉。下面可以试一下,在项目根目录的下面,新建一个文件,名字是 .env,在这个文件里添加一个环境变量,名字要用 NUXT 开头,要覆盖掉 runtimeConfig 里的 public 里的配置,还得在这个名字里加上一个 PUBLIC,然后是 API_BASE_URL。设置一下它的值,https://nid-node.ninghao.co

打开 nuxt.config,去掉 runtimeConfig,public 里的这个 apiBaseUrl 它的值,使用一个空白字符。

在终端,重新启动一下项目的开发服务。然后在浏览器再观察一下,现在控制台输出的这个 apiBaseUrl 的值仍然是 https://nid-node.ninghao.co,这个值是在 .env 这个文件里定义的 NUXT_PUBLIC_API_BASE_URL 这个环境变量的值。

Nuxt 项目中的运行时配置(runtimeConfig)《 Nuxt.js:网络请求 》

统计

15260
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点