Nuxt.js能否在运行时或启动前配置router-base而非构建阶段？

能否在Nuxt.js运行时或应用启动前完成router.base配置，无需在构建阶段固化参数？

现有配置与问题表现 #

• 已在nuxt.config.js中写入静态配置：

  router: { base: process.env.APP_CONTEXT_PATH }
  

• 所用Docker构建文件逻辑为：

  FROM node:14
  WORKDIR /usr/src/app
  COPY package.json ./
  RUN npm install
  COPY . .
  EXPOSE 3000
  RUN npm run build
  CMD [ "npm", "run", "start" ]
  

• 运行时会出现明显的配置不生效问题：
  • 通过docker-compose.yml注入APP_CONTEXT_PATH环境变量启动后，入口层面虽然可以通过http://<HOST>:<PORT>/<APP_CONTEXT_PATH>请求到应用，但Nuxt生成的router.base始终固定为根路径/，所有静态脚本路径、前端路由跳转逻辑都基于根路径生成，没有携带配置的上下文前缀，最终导致页面资源加载失败、路由跳转失效
  • 如果在Dockerfile构建阶段预先写入ENV APP_CONTEXT_PATH=/app/固化环境变量，构建完成后运行可以正常生效，但每次调整上下文路径都需要重新构建镜像，完全不符合灵活配置的需求

问题根因 #

Nuxt.js在执行npm run build阶段，就会把nuxt.config.js里的所有静态配置编译打包进构建产物中。构建过程中读取到的环境变量值会被直接内嵌到产物里，后续运行时即便修改同名称的环境变量，也不会被已经固化的构建产物读取，因此无法动态生效。

解决方法 #

• 解耦构建期的静态配置与运行时的动态参数，将router.base的赋值逻辑从构建期前移到容器启动阶段，跳过构建时的编译固化过程：
  1. 修改nuxt.config.js中的配置，把实际路径值替换为固定占位符，避免构建时读取真实环境变量：

     router: {
       base: '__RUNTIME_ROUTER_BASE__'
     }
     

  2. 在项目中新增启动脚本start.sh，实现启动前动态注入配置的逻辑：

     #!/bin/sh
     # 读取运行时注入的环境变量，默认值为根路径
     ROUTER_BASE_VALUE=${APP_CONTEXT_PATH:-/}
     # 替换配置文件中的占位符为真实路径
     sed -i "s|__RUNTIME_ROUTER_BASE__|${ROUTER_BASE_VALUE}|g" ./nuxt.config.js
     # 执行原Nuxt启动命令
     npm run start
     

  3. 修改Dockerfile的启动指令，把原有的直接启动命令替换为执行自定义启动脚本：

     # 给启动脚本加执行权限
     RUN chmod +x ./start.sh
     # 替换原有CMD配置
     CMD ["./start.sh"]
     

  这种方式下，构建阶段打包的配置只包含占位符，不会固化真实路径值，所有环境变量的替换都发生在容器启动的瞬间，每次调整上下文路径只需要修改docker-compose中的环境变量值重启容器即可，完全不需要重新构建镜像。
• 备选轻量方案：如果不需要复杂的动态路由配置，可以在前置网关（如Nginx）层做路径重写，把携带上下文前缀的请求去掉前缀后转发到Nuxt服务，让Nuxt始终以根路径运行，网关层负责统一补全前端跳转、资源请求的路径前缀。这种方式不需要修改Nuxt本身的配置加载逻辑，但长期维护时需要额外处理所有链路的路径匹配规则，维护成本更高。

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