Nuxt3+Vue3多环境apiHost配置优化方案咨询

方案1：利用Nuxt环境变量前缀+npm脚本简化构建 #

Nuxt支持自动识别**NUXT_PUBLIC_**前缀的环境变量，会自动注入到runtimeConfig.public中，可大幅简化构建流程：

1. 在environments目录下创建对应环境的.env文件：

   • .test.env：NUXT_PUBLIC_API_HOST=http://test-host
   • .demo.env：NUXT_PUBLIC_API_HOST=http://demo-host
   • .prod.env：NUXT_PUBLIC_API_HOST=http://prod-host

2. 在package.json中添加封装好的npm脚本：

   {
     "scripts": {
       "build:test": "nuxt build --dotenv environments/.test.env && mv .output .test",
       "build:demo": "nuxt build --dotenv environments/.demo.env && mv .output .demo",
       "build:prod": "nuxt build --dotenv environments/.prod.env && mv .output .prod",
       "build:all": "npm run build:test && npm run build:demo && npm run build:prod"
     }
   }
   

   之后只需运行npm run build:test或npm run build:all，即可完成对应环境的构建，无需重复输入冗长命令。

方案2：构建时通过命令行参数动态传入变量 #

如果不想维护多个.env文件，可直接在构建命令中传入环境变量，Nuxt会自动读取并注入到runtimeConfig：

修改package.json的脚本：

{
  "scripts": {
    "build:test": "NUXT_PUBLIC_API_HOST=http://test-host nuxt build && mv .output .test",
    "build:demo": "NUXT_PUBLIC_API_HOST=http://demo-host nuxt build && mv .output .demo",
    "build:prod": "NUXT_PUBLIC_API_HOST=http://prod-host nuxt build && mv .output .prod"
  }
}

此方案无需维护.env文件，直接通过命令行变量指定apiHost即可。

方案3：运行时动态加载配置（仅需一次构建） #

若部署环境允许在运行时确定apiHost，可只构建一次，运行时通过环境变量覆盖配置：

1. 修改nuxt.config.ts，让public.apiHost默认读取环境变量并保留默认值：

   export default defineNuxtConfig({
     runtimeConfig: {
       public: {
         apiHost: process.env.NUXT_PUBLIC_API_HOST || "http://<somehost>"
       }
     }
   })
   

2. 执行一次构建：

   nuxt build
   

3. 不同环境运行时指定apiHost：

   # 测试环境运行
   NUXT_PUBLIC_API_HOST=http://test-host node .output/server/index.mjs
   # 演示环境运行
   NUXT_PUBLIC_API_HOST=http://demo-host node .output/server/index.mjs
   # 生产环境运行
   NUXT_PUBLIC_API_HOST=http://prod-host node .output/server/index.mjs
   

   该方案仅需一次构建，适合Docker等容器化部署场景，运行时通过环境变量注入配置即可。

内容的提问来源于stack exchange，提问作者Gladiator Boo