Nuxt .env 并将 js 导入商店

Posted 2023-02-22

【中文标题】Nuxt .env 并将 js 导入商店

【英文标题】：Nuxt .env and import a js into a store

【发布时间】：2021-12-18 18:03:00

【问题描述】：

我创建了一个有点大的 config.js 文件，用于配置类型的东西。我正在使用 .env 来将秘密等放在我的 github 之外。在我的 .env 文件中，我有一个名为 environment 的变量，我用它来确定我是在本地、开发、阶段还是产品上。在我的 config.js 文件中，我使用它来加载我的证书和密钥，以及一堆其他变量，这些变量取决于我所在的环境。

在我的一个 Vuex Store 文件中，当我执行以下操作时，它可以工作

import config from '@/config'  
console.log(process.env.enviorment) // This logs out 'development' which i set in my .env file
const environ = config.developmemt

当我执行以下操作时，我得到 'environ is undefiend'，即使我可以看到 'development' 已注销。

import config from '@/config'  
console.log(process.env.enviorment) // This logs out 'development' which i set in my .env file
const environ = config[process.env.enviorment]

我的 VueEx 文件...

import config from '@/config'
console.log(process.env.enviorment) // <--- This is where it loads undefined at the app.js file which is my store, but loads the value in client.js
console.log(this.app) // <----------- this.app is undefined every time.
const environ = config.developmemt


export const state = () => (

 environment: eviron

)

【问题讨论】：

这能回答你的问题吗？ How to use .env variables in Nuxt 2 or 3?

Nuxt 2，没有。这些中的每一个都描述了除 Vuex 商店之外的所有内容。据我所知，在加载 .env 文件之前，商店正在加载。正如我所看到的，app.js 商店将控制台显示为未定义，但随后 client.js 正在加载数据就好了。

这个怎么样？ ***.com/a/65553464/8816585 另外，据我所知，env 变量是首先加载的。

this.app 未定义

请分享未定义的代码的确切 sn-p。

【参考方案1】：

您只能在构建过程中使用 process.env。您想在 runtime 中使用 ENV。在 nuxt 中，我们有内置的 ENV 处理： https://nuxtjs.org/docs/directory-structure/nuxt-config#runtimeconfig

在 .env 文件中添加您的 ENV：

ENVIRONMENT=staging

在 nuxt.config.js 中你可以使用 process.env.ENVIRONMENT，因为它会在构建时分配：

export default 
  publicRuntimeConfig: 
    environment: process.env.ENVIRONMENT
  ,
;

然后您可以在运行时从 publicRuntimeConfig 获取所有 ENV（在 vue 和 store 文件中）：

this.$config.environment

你可以在这里查看我的演示： https://codesandbox.io/s/nuxt-envs-hx2cw?file=/pages/index.vue

【讨论】：

实际上，我们在上下文中也确实有一个isDev 属性：nuxtjs.org/docs/concepts/context-helpers

我应该澄清一下，这正是我所做的，我只是没有使用 this.$config，而是使用了 process.env。但是现在我正在尝试 this.$config 我得到“无法读取未定义的属性 '$config'”。在我上面的 Vuex 商店中，我更改的唯一行是 console.log(process.env.enviorment) 为 console.log(this.$config)

@kissu 是的，但有时 isDev 是不够的。例如，您可能只想在生产中添加一些库（例如分析），而不是暂存。 production 和 staging 都有 'isDev === false'，但你仍然不知道它是 staging 还是 production。

@Jamie 我想是的。可能没有办法在州一级获得“这个”内容。

是的，我之前已经联系过你：github.com/nuxt/nuxt.js/issues/7602#issuecomment-735385911