Nuxt.js 全静态模式应用配置文件的存储与加载方案咨询

核心思路 #

放弃构建阶段注入环境变量的方案，改为应用客户端运行时主动拉取nginx托管的独立config.json配置文件，Docker容器启动时根据传入的环境变量动态生成该配置文件，实现一份镜像适配多环境部署。

具体实现步骤 #

1. 项目内新增配置加载逻辑 #

在项目utils目录下新增加载工具loadConfig.js：

// utils/loadConfig.js
let appConfig = null

export const loadAppConfig = async () => {
  if (appConfig) return appConfig
  try {
    const res = await fetch('/config.json')
    appConfig = await res.json()
    return appConfig
  } catch (e) {
    // 兜底配置，可根据需要修改
    console.error('加载配置文件失败，将使用默认配置', e)
    appConfig = {
      API_URL: 'https://default-api.example.com'
    }
    return appConfig
  }
}

在Nuxt应用入口（如app.vue的onMounted钩子，或新增客户端插件）触发配置加载，加载完成后再挂载应用，或存入全局状态（如pinia、vuex）供全局调用：

<!-- app.vue -->
<script setup>
import { loadAppConfig } from '~/utils/loadConfig'
// 全静态模式仅客户端加载即可
if (process.client) {
  await loadAppConfig()
}
</script>

2. 新增配置模板 #

在项目public目录下新增config.example.json作为模板，无需提交实际环境的config.json到代码仓库：

{
  "API_URL": "__API_URL__",
  "OTHER_CONFIG": "__OTHER_CONFIG__"
}

3. 调整Docker配置 #

修改Dockerfile，新增容器启动时动态生成配置文件的逻辑，示例如下：

# 构建阶段省略，仅展示最终nginx镜像阶段
FROM nginx:alpine
# 拷贝构建出的Nuxt静态资源到nginx目录
COPY .output/public /usr/share/nginx/html
# 拷贝配置模板到容器内
COPY public/config.example.json /config.template.json
# 拷贝nginx配置（见步骤4）
COPY nginx.conf /etc/nginx/conf.d/default.conf

# 容器启动脚本：用环境变量替换模板占位符，生成config.json到静态资源目录
CMD ["/bin/sh", "-c", "envsubst < /config.template.json > /usr/share/nginx/html/config.json && nginx -g 'daemon off;'"]

CI/CD部署时仅需传入对应环境的环境变量即可，无需重新构建镜像：

# 启动容器时传入环境变量示例
docker run -e API_URL=https://api.test.example.com your-nuxt-image:latest

4. 调整nginx配置 #

确保config.json请求不会被Nuxt的路由规则拦截，在nginx配置的server块中添加如下规则：

location /config.json {
  root /usr/share/nginx/html;
  try_files $uri =404;
  add_header Cache-Control "no-store, no-cache, must-revalidate";
}

# 原有Nuxt静态站点的路由回退规则
location / {
  try_files $uri $uri.html $uri/ /index.html;
}

注意事项 #

• config.json是前端可公开访问的文件，禁止存储密钥、凭证等敏感信息
• 如果需要在服务端渲染阶段使用配置，可在服务端逻辑中直接读取系统环境变量即可，无需通过config.json获取

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