Nuxt3 SPA部署Azure静态Web应用后动态路由刷新报错求助

Hey there! I totally get how frustrating it is when your SPA works smooth until you refresh a dynamic route—let's sort this out together.

Why This Happens #

When you deploy a Nuxt 3 SPA (with ssr: false), all routing is handled client-side by Vue Router. But when you refresh a page like user/[id], Azure Static Web Apps tries to look for a physical file at that path on the server. Since there's no actual user/1.html or similar file (we’re using client-side routing after all), it throws that "resource unavailable" error.

Solution 1: Configure Azure to Redirect All Requests to index.html (Recommended) #

The easiest and most scalable fix is to tell Azure Static Web Apps to send every request to your SPA's entry point (index.html), so Vue Router can take over routing. Here's how:

1. Create a file named staticwebapp.config.json in the root of your Nuxt project.
2. Add the following content to it:

{
  "routes": [
    {
      "route": "/*",
      "serve": "/index.html",
      "statusCode": 200
    }
  ]
}

3. Re-run nuxt generate and redeploy your .output/public/ directory to Azure.

This config tells Azure that no matter what path the user requests, it should serve index.html instead of throwing a 404. Vue Router will then handle the dynamic route correctly on the client side, even after a refresh.

Solution 2: Pre-Render Dynamic Routes (For Limited Use Cases) #

If you have a small, fixed set of dynamic route parameters (like a known list of user IDs), you can pre-render those pages during the nuxt generate step. This creates physical HTML files for each dynamic route, so Azure can find them when you refresh.

Update your nuxt.config.ts like this:

export default defineNuxtConfig({
  ssr: false,
  generate: {
    routes: async () => {
      // Replace this with logic to fetch your actual dynamic route parameters
      // For example, fetch from an API to get all user IDs
      const userIds = ['1', '2', '3'];
      return userIds.map(id => `/user/${id}`);
    }
  }
});

Then run nuxt generate again—you'll see that .output/public/user/ now has subdirectories for each ID with an index.html file. Deploy these files, and refreshing those routes will work.

Note: This only works if you know all your dynamic route parameters ahead of time. If your routes are generated dynamically (like user IDs that are added constantly), stick with Solution 1.

Final Notes #

Make sure you're deploying the entire .output/public/ directory after running nuxt generate, and that your Azure Static Web Apps deployment picks up the staticwebapp.config.json file (it should automatically if it's in the root of your deployed content).

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