部署后Nuxt页面重载时fetch()方法不执行问题求助

我在Nuxt应用中通过fetch()方法获取数据，本地正常使用完全没问题，但部署到服务器后，一旦重载页面，数据就会消失，而且fetch()方法根本不执行——网络面板里连请求记录都没有。

我使用了axios和vuex，相关代码如下：

Vuex Store代码 #

// state
export const state = () => ({
  list: [],
})

// getters
export const getters = {
  getUsers(state){
    return state.list
  },
  getActiveUsers(state){
    return state.list.filter(user => user.user.is_active);
  }
}

// mutations
export const mutations = {
  SET_USERS(state, users){
    state.list = users
  },
}

// actions
export const actions = {
  async fetchUsers(context) {
    try {
      const data = await this.$axios.get(`/api/v1/user/`)
      data.data.forEach(user => {
        user.contrastColor = calculateContrastColor(user.color);
      })
      context.commit('SET_USERS', data.data)
    }
    catch (error) {
      console.log(error)
    }
  }
}

页面组件（page.vue）代码 #

<script>
export default {
  computed: {
    users() {
      return this.$store.state.users.list
    }
  },
  fetch() {
    return this.$store.dispatch("users/fetchUsers");
  },
}
</script>

GitHub Actions部署配置 #

name: Deployment

on:
  workflow_run:
    workflows: ["ci"]
    types:
      - completed

env:
  BASE_URL: http://mysupercoolbackendurl.com/

jobs:
  build:
    runs-on: self-hosted
    steps:
      - name: Checkout 🛎
        uses: actions/checkout@v3

      - name: Setup node env 🏗
        uses: actions/setup-node@v3.0.0
        with:
          node-version: ${{ matrix.node }}
          check-latest: true

      - name: Cache node_modules 📦
        uses: actions/cache@v2.1.7
        with:
          path: ~/.npm
          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
          restore-keys: |
            ${{ runner.os }}-node-

      - name: Install dependencies 👨🏻‍💻
        run: npm ci --prefer-offline --no-audit

      - name: Build project 🏗
        run: npm run build
      
      - name: Start server 🚀
        run: | 
          pm2 restart mysupercoolservice
          sudo systemctl restart nginx

补充信息：设置fetchOnServer: false后问题仍未解决，使用版本为nuxt@2.15.8、node v14.17.6。

排查方向与解决办法 #

1. 强制客户端执行fetch并添加延迟
   Nuxt 2的fetch()在服务端执行异常时可能会阻断客户端执行，可强制指定仅客户端执行，并添加短暂延迟确保触发：

   <script>
   export default {
     computed: {
       users() {
         return this.$store.state.users.list
       }
     },
     fetchOnServer: false,
     async fetch() {
       // 短暂延迟确保客户端环境就绪
       await new Promise(resolve => setTimeout(resolve, 100));
       await this.$store.dispatch("users/fetchUsers");
     },
   }
   </script>
   

2. 确认环境变量与axios配置
   部署时的BASE_URL可能未被Nuxt正确读取，导致axios请求地址无效。在nuxt.config.js中明确配置axios的baseURL：

   export default {
     axios: {
       baseURL: process.env.BASE_URL || 'http://localhost:3000'
     }
   }
   

   同时在GitHub Actions的build步骤前添加环境变量检查：

   - name: Verify environment variable 🧐
     run: echo "BASE_URL is: $BASE_URL"
   

3. 排查服务端请求错误
   服务端执行fetch()时的请求错误可能未被捕获到日志中，修改Vuex action的catch逻辑，输出详细错误到服务器日志：

   catch (error) {
     const errorMsg = error.response?.data?.message || error.message;
     console.error('获取用户数据失败:', errorMsg);
     // 服务端环境输出到Nuxt日志
     if (process.server) {
       this.$nuxt.error({ statusCode: error.response?.status || 500, message: '用户数据加载失败' });
     }
   }
   

   之后通过pm2 logs mysupercoolservice查看服务端日志，确认是否有请求失败的情况。

4. 清理缓存后重新构建
   部署时可能存在Nuxt缓存导致的异常，先清理缓存再构建：

   rm -rf .nuxt node_modules/.cache && npm run build
   

   同时确认GitHub Actions中的缓存配置是否影响了依赖或构建产物，必要时可以临时禁用缓存测试。

内容的提问来源于stack exchange，提问作者Erich Vogel V2