성분 nnxt의 process.env 변수에 액세스할 수 없음

성분 nnxt의 process.env 변수에 액세스할 수 없음

nuxt config에서 나는 Enview object를 가지고 있다.

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

구성 요소 템플릿에 표시하려는 경우:

{{ process.env.hey }}

나 에러 받았어.

정의되지 않은 속성의 'env'를 읽을 수 없음

무엇이 그것을 야기시킬 수 있는지 알기나 해?

Nuxt < 2.13

process템플릿에는 직접 사용할 수 없지만, 계산된 속성을 생성하거나 구성 요소의 상태에 추가하여 액세스할 수 있다.예를 들면 다음과 같다.

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

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

Nuxt >= 2.13

이제 다음과 같이 런타임 구성을 사용할 수 있다.

nnxt.config

export default {
  publicRuntimeConfig: {
    message: process.env.hey || 'hello world!',
  },
};

템플릿.부에를 하다

<template>
  <div>{{ $config.message }}</div>
</template>

nuxt 구성 요소에서 환경 변수를 포착하는 방법은 다음과 같다.

먼저 다음 항목을 생성하십시오.serverInit.jsVuex 스토어에 파일을 저장하십시오.왜냐하면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브룩스 주(州)로 말이야그런 다음 구성 요소를 호출하려면 다음을 실행하십시오.

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

컴포넌트 안에, 그리고 짜잔!

Vue 구성 요소는 환경 변수에 직접 액세스할 수 없다.Vue가 클라이언트 쪽이고 환경 변수가 서버 쪽이라고 생각해 보십시오.

이것을 극복하기 위한 몇 가지 방법이 있을 것이다.웹 팩을 사용하는 경우 다음 중 하나를 선택하십시오.

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

환경 변수를 클라이언트 측에서 글로벌 변수로 정의할 수 있다.

참조URL: https://stackoverflow.com/questions/59413786/can-not-access-process-env-variables-in-component-nuxt