nuxt3_配置環境變數

Syinho發表於2024-03-29
UX變數

配置.env檔案

  • 在根目錄下新增不同的環境檔案

  • .env.dev

    • NUXT_PUBLIC_API_BASE=http://192.168.110.209:8000
NUXT_API_KEY=my-api-key-dev
NUXT_TEST_VARIABLE=dev
NUXT_TEST_TEST_VARIABLE=ZZYY
NUXT_ENVIRONMENT=development

  • .env.local

    • NUXT_PUBLIC_API_BASE=http://127.0.0.1:3055
NUXT_API_KEY=my-api-key-local
NUXT_TEST_VARIABLE=local
NUXT_TEST_TEST_VARIABLE=ZZYY
NUXT_ENVIRONMENT=development

  • .env.prod

    • NUXT_PUBLIC_API_BASE=http://xxx.com
NUXT_ENVIRONMENT=production

配置nuxt.config.ts

  • runtimeConfig: {
  // 以下變數只能在服務端使用
  apiSecret: '',
  apiKey: '',
  testVariable: '',
  // testTestVariable:'', // 變數必須在nuxt.config.js中宣告才可以使用
  // public 下的變數可以在客戶端和服務端使用
  public: {
    apiBase: '',
  },
},

  • 需要注意的是: 只有在runtimeConfig中宣告瞭的變數才能夠被使用, 且public物件中的變數是伺服器端與客戶端均能使用, 但是其它變數只能伺服器端使用

配置package.json

"build": "nuxt build --dotenv .env.prod",
"dev": "nuxt dev --dotenv .env.dev",
"local": "nuxt dev --dotenv .env.local",

獲取環境變數

  • 啟動開發環境

    • pnpm run dev

  • 在/page/login.vue頁面中列印useRuntimeConfig()

  • <script setup>
// page/login.vue
console.log(useRuntimeConfig())
</script>

  • // 列印結果, 成功獲取到.env.dev檔案中的apiBase變數
{
    "public": {
        "apiBase": "http://192.168.110.209:8000"
    },
    "app": {
        "baseURL": "/",
        "buildAssetsDir": "/_nuxt/",
        "cdnURL": ""
    }
}

  • 在/server/api/xxx.js中列印useRuntimeConfig()

  • export default defineEventHandler(async event => {
  console.log(useRuntimeConfig(event))
  
})

  • {
  app: { baseURL: '/', buildAssetsDir: '/_nuxt/', cdnURL: '' },       
  nitro: {
    envPrefix: 'NUXT_',
    routeRules: {
      '/__nuxt_error': [Object],   
      '/': [Object],
      '/m': [Object],
      '/m/login': [Object],        
      '/_nuxt/builds/meta/**': [Object],
      '/_nuxt/builds/**': [Object] 
    }
  },
  public: { apiBase: 'http://192.168.110.209:8000' },
  apiSecret: '123',
  apiKey: 'my-api-key-dev',        
  testVariable: 'dev'
}
    • 在上面的列印中可以看到伺服器端準確讀取到了所有在nuxt.config.ts檔案中宣告的變數, 並獲取到了.env.dev檔案中賦值的值, 同時也可以注意到, 在.env.dev檔案中賦值的NUXT_TEST_TEST_VARIABLE=ZZYY並沒有被獲取到, 因為在nuxt.config.ts檔案中並沒有宣告這個變數

  • 啟動本地環境, 檢視/server/api/xxx.js中的列印, 驗證是否成功獲取到.env.local中的賦值

    • pnpm run local

    • // /server/api/xxx.js 檔案中的列印
{
  app: { baseURL: '/', buildAssetsDir: '/_nuxt/', cdnURL: '' },       
  nitro: {
    envPrefix: 'NUXT_',
    routeRules: {
      '/__nuxt_error': [Object],   
      '/': [Object],
      '/m': [Object],
      '/m/login': [Object],        
      '/_nuxt/builds/meta/**': [Object],
      '/_nuxt/builds/**': [Object] 
    }
  },
  public: { apiBase: 'http://127.0.0.1:3055' },
  apiSecret: '123',
  apiKey: 'my-api-key-local',      
  testVariable: 'local'
}

相關文章