VueJS SPA路由URL可访问问题：Nginx 404报错及预渲染插件咨询

Great question! Let's break down why this is happening and your options to fix it.

First, the root cause: When you use Vue Router in history mode (which you’re almost certainly using to get clean URLs without the #), your SPA relies on the client-side Vue app to handle routing. But when someone directly visits www.example-url.com/information or shares that link, the request goes straight to your Nginx server first. Nginx looks for a physical file or directory at /information—which doesn’t exist, hence the 404 error.

Option 1: Fix Nginx Configuration (Simplest Solution) #

You don’t need a pre-rendering plugin just to fix the 404. The easiest fix is to update your Nginx config to serve your index.html file whenever it can’t find a matching physical resource. This lets Vue Router take over client-side routing.

Here’s how to adjust your Nginx server block:

server {
    listen 80;
    server_name www.example-url.com;
    root /path/to/your/spa/dist; # Replace with your Vue build output path

    location / {
        try_files $uri $uri/ /index.html;
    }
}

After updating the config, restart Nginx (sudo systemctl restart nginx on most Linux systems) and direct visits to /information should work as expected.

Option 2: Pre-Rendering (Great for SEO) #

If you also need better SEO for your static routes (like /information), then a pre-rendering plugin is a solid choice. Pre-rendering generates static HTML files for each specified route during the build process. So when someone visits /information, Nginx can serve the pre-rendered information.html file directly—this is better for search engines than letting Vue render content client-side.

This works best if your routes are static (no dynamic parameters like /user/:id). For dynamic routes, you’d need server-side rendering (SSR) instead, but pre-rendering is lighter weight for simple static routes like your portfolio.

Which Should You Choose? #

• If you only care about fixing the 404 and enabling direct link access: Go with the Nginx config fix—it’s quick and requires no extra build steps.
• If you also want improved SEO for your static routes: Add pre-rendering to your build process alongside the Nginx config (the config still acts as a fallback, just in case).

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