nuxt3_配置环境变量

配置.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'
    }