Nuxt .env 并将 js 导入商店

Question

我创建了一个有点大的 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
}
)

Answer 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