Nuxt 3 中的环境变量与 Pinia

Question

我尝试使用 useRuntimeConfig() 在 Pinia 存储中的 defineStore() 中渲染 env 变量，但存储无法使用该方法，抛出错误： “Nuxt 实例不可用”。

我想出了一个解决方法并创建了一个可组合函数，其中可以使用 useRuntimeConfig() 并返回我的环境变量。然后在存储状态中调用此可组合项。

对于像使用 process.env 这样简单的事情来说，这听起来太复杂了。使用 Nuxt 3 + Pinia 和环境变量的最佳实践是什么？

Answer 1

在 Nuxt 3 中比在 Nuxt 2 中“更难”。

因为 Nuxt Instance 在非 Nuxt “原生” 的地方不可用，例如 Pinia 及其存储或您在项目中创建的任何非 /server、/components、/composables 等文件夹.

目前 Pinia 并未默认出现在 Nuxt 中，因此某些功能（如您所要求的功能）无法“开箱即用”。 也许在（不久的）“未来”团队会合并它，但我们不知道。

目前，我个人解决问题的方法是按照您所做的操作，结合

useRuntimeConfig()

、

.env

文件和可组合项。

请记住，Nuxt 3 是候选版本，许多事情可能会在不久的将来发生变化。

许多软件包要等到 v1.0 发布才能集成，然后记录如何使用框架，也许 pinia 就是这种情况。

Answer 2

要将环境变量与 pinia 一起使用，您需要在 .env 环境文件中设置 VITE_VARIABLE，然后使用 import.meta.env

使用示例

.env

VITE_BASE_URL=https://apiurl.com

store.js

const baseUrl = `${import.meta.env.VITE_BASE_URL}`

Answer 3

我想我找到了一种更直接的方法。 在 Pinia 的 DefineStore 中，Nuxt 应用程序的公开方式如下：

this.$nuxt

因此要获取我可以使用的环境变量：

this.$nuxt.$config.public.API_HOST

如果我想从插件内访问它，那么我可以使用：

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.hook('app:created', async () => {
    console.log('Starting app with API: ', nuxtApp.$config.public.API_HOST)
   })
})

Answer 4

使用 useNuxtApp() 的解决方案:

.env

HOST=192.168.0.2

nuxt.config.js

export default defineNuxtConfig({
runtimeConfig: {
    public: {      
      host: process.env.HOST,
    },
  },
})

myPiniaStore.js

...
const nuxt = useNuxtApp();
const host = nuxt.$config.public.host
console.log(host);
//output: 192.168.0.2
...

使用 useRuntimeConfig() 的解决方案:

.env

HOST=192.168.0.2

nuxt.config.js

export default defineNuxtConfig({
runtimeConfig: {
    public: {      
      host: process.env.HOST,
    },
  },
})

myPiniaStore.js

...
const config = useRuntimeConfig();
const host = config.public.host
console.log(host);
//output: 192.168.0.2
...

https://nuxt.com/docs/guide/going-further/runtime-config