如何通过FTP将Nuxt部署到子域名并修复路由问题？

1. 在GitHub Action中注入分支对应的环境变量 #

在部署的Action脚本里，根据当前分支设置环境变量，让Nuxt构建时能区分不同环境的配置：

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
        uses: actions/checkout@v3

      - name: Set environment variables by branch
        run: |
          if [ "${{ github.ref }}" = "refs/heads/master" ]; then
            echo "NUXT_ENV_ROUTER_BASE=/" >> $GITHUB_ENV
            echo "NUXT_ENV_PUBLIC_PATH=/_nuxt/" >> $GITHUB_ENV
          elif [ "${{ github.ref }}" = "refs/heads/staging" ]; then
            echo "NUXT_ENV_ROUTER_BASE=/" >> $GITHUB_ENV
            echo "NUXT_ENV_PUBLIC_PATH=/_nuxt/" >> $GITHUB_ENV
          fi

      - name: Install dependencies
        run: npm install

      - name: Generate static files
        run: npm run generate

      # 后续FTP部署步骤

如果你的Staging环境是部署到子目录（比如staging.example.com/test/），则需要将NUXT_ENV_ROUTER_BASE改为/test/，NUXT_ENV_PUBLIC_PATH改为/test/_nuxt/。

2. 在nuxt.config.js中通过环境变量配置路由和资源路径 #

修改nuxt.config.js，动态读取环境变量来配置路由基础路径和资源公共路径，确保构建时生成对应环境的正确路径：

export default {
  // 配置路由基础路径
  router: {
    base: process.env.NUXT_ENV_ROUTER_BASE || '/'
  },

  // 配置构建后资源的公共路径
  build: {
    publicPath: process.env.NUXT_ENV_PUBLIC_PATH || '/_nuxt/'
  },

  // 开启静态生成的fallback，避免路由访问异常
  generate: {
    fallback: true
  }
}

3. 验证修复效果 #

• 重新触发Staging分支的部署Action
• 部署完成后，打开浏览器控制台查看_nuxt目录下JS文件的请求路径：正常情况下应为https://staging.example.com/_nuxt/xxx.js（根目录部署场景）
• 如果路径正确但仍404，检查FTP是否完整上传了_dist/_nuxt目录下的所有文件

额外排查点 #

• 若之前硬编码过build.publicPath或router.base，请确保已替换为环境变量读取逻辑
• 确认GitHub Action中分支判断的语法无错误，环境变量已正确注入

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