Nuxt.js每次导航全应用强制刷新及Strapi动态路由生产环境404异常问题求助

Let's break down and fix the two problems you're facing with your blog system:

1. 404 Network Error in Production (But Data Loads Successfully) #

The 404 error you're seeing happens because you're using target: 'static' with generate.fallback: true, but your custom URL pages aren't being pre-generated during the static build. Here's the breakdown:

• When a user visits a custom URL like /meine-kamera, the browser first tries to fetch the pre-built static HTML file for that path. Since it doesn't exist, it throws a 404.
• Thanks to fallback: true, Nuxt then loads the fallback 200.html file and dynamically renders the page client-side, which is why your data still loads correctly.

Fix: Pre-Generate All Custom URLs #

You need to tell Nuxt to fetch all your custom URLs from Strapi during the build process, so it can generate static HTML files for each one. Update the generate section in your nuxt.config.js:

generate: {
  fallback: true,
  // Fetch all custom URLs from Strapi to pre-generate pages
  routes: async () => {
    try {
      // Replace with your actual Strapi endpoint for pages
      const response = await fetch(`${process.env.strapiBaseUri}/api/pages`);
      const pages = await response.json();
      // Return an array of your custom URLs (adjust the field name to match your Strapi model)
      return pages.data.map(page => page.attributes.customUrl);
    } catch (error) {
      console.error('Error fetching routes from Strapi:', error);
      return [];
    }
  }
}

Note: Make sure customUrl matches the field name you use in your Strapi Page model for the custom URL.

Bonus Check: Verify Resource Paths #

If the 404 is for a specific resource (like an image or script), ensure you're using absolute paths or Nuxt's asset handling correctly. Avoid relative paths that might break when deployed to subpaths.

2. Full Page Refresh on Nuxt Navigation #

The most common cause of this is using regular <a> tags instead of Nuxt's <nuxt-link> component for internal navigation. Regular anchor tags trigger a full browser refresh, while <nuxt-link> uses client-side routing to load pages without reloading the entire app.

Fix: Replace <a> Tags with <nuxt-link> #

Update all internal links in your components and pages:

<!-- ❌ Bad: Triggers full page refresh -->
<a href="/meine-kamera">Meine Kamera</a>

<!-- ✅ Good: Uses client-side navigation -->
<nuxt-link to="/meine-kamera">Meine Kamera</nuxt-link>

Additional Checks: #

• Ensure you're not programmatically using window.location.href or location.reload() anywhere in your code (these force full page reloads).
• If you're rendering dynamic links from Strapi data, make sure you wrap them in <nuxt-link> instead of plain <a> tags.

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