Question

在nuxt配置中，我有env对象

env: {
    hey: process.env.hey || 'hey'
},

我想立即在组件模板中显示它：

{{ process.env.hey }}

我遇到错误

无法读取未定义的属性'env'

有什么想法会导致这种情况吗？

Answer 1

process不能直接用于模板，但是您可以通过创建计算属性或将其添加到组件的状态来访问它。这是一个示例：

<template>
  <div>{{ message }}</div>
</template>

export default {
  computed: {
    message() {
      return process.env.hey;
    },
  },
};

Answer 2

Vue组件无法直接访问环境变量。可以将其视为Vue在客户端，而环境变量在服务器端。

可能有几种方法可以解决此问题。如果您使用的是webpack，这是一种选择：

https://webpack.js.org/plugins/define-plugin/

您可以在客户端将环境变量定义为全局变量。

Answer 3

这是在nuxt组件中获取环境变量的方法。

首先，您必须在Vuex商店中创建serverInit.js文件。由于process.env是在服务器端呈现的，因此您必须在应用程序的也在服务器端呈现的部分中调用它。在这种情况下，就是Vuex。

const state = () => ({
  env: {},
  buildEnv: '',
})

const mutations = {
  setEnv(state, env) {
    state.env = env
  },
  setBuildEnv(state, env) {
    state.buildEnv = env
  },
}

const actions = {
  nuxtServerInit({ commit }) {
    if (process.server) {
      if (process.env.NUXT_ENV_BUILD_HASH) {
        commit('setEnv', {
          buildHash: JSON.parse(process.env.NUXT_ENV_BUILD_HASH),
        })
      } else {
        commit('setEnv', {
          buildHash: false,
        })
      }
      commit('setBuildEnv', process.env.NODE_ENV)
    }
  },
}
const getters = {
  env(state) {
    return state.env
  },
  buildEnv(state) {
    return state.buildEnv
  },
}

export default {
  state,
  mutations,
  actions,
  getters,
}

如上所述，if (process.server)是在服务器端呈现应用程序时执行的。这使您可以将process.env中的任何内容保存为Vuex状态。然后，当您想在组件中调用它们时，只需运行：

computed: {
    ...mapGetters(['env', 'buildEnv']),
}

在组件内部，瞧！

无法访问组件nuxt

3 个答案: