时间戳

首页 > 解决方案 > Nuxt .env 并将 js 导入商店

vue.js - Nuxt .env 并将 js 导入商店

问题描述

我为配置类型的东西创建了一个有点大的 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

当我执行以下操作时，我得到“环境不安全”，即使我可以看到“开发”已注销。

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
}
)

标签： vue.jsnuxt.jsvuex

解决方案

您只能在构建过程中使用 process.env。您想在运行时使用 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 和存储文件中）：

this.$config.environment

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

推荐阅读