Nuxt3 如何引入環境變數

在 Vue2 或 Vue3 的專案中，我們常常會引入環境變數，例如 process.env.NODE_ENV === 'development'、process.env.NODE_ENV === 'production'，來區分不同工作環境下，要顯示不同的 UI。

Vue2, Vue3 中，直接使用上述判斷即可，但在 Nuxt3 中，卻永遠印出 process.env.NODE_ENV=production ，這樣的結果，非常莫名奇妙。

Table of contents

解決方法

先將變數加入 nuxt.conf.ts 中

runtimeConfig: {
    public: {
      vueAppMode: process.env.VUE_APP_MODE,
    },
},

使用專用的函式 useRuntimeConfig 帶入 Vue 之中，再判斷變數

const VUE_APP_MODE = useRuntimeConfig().public.vueAppMode;

if( VUE_APP_MODE === 'development') { xxx }