Ubuntu16.04+Nginx部署Vue生产项目：页面空白及子路由404问题

Hey there, let's tackle this Vue deployment problem you're facing—this is a super common issue with single-page apps (SPAs) using history mode routing, so we can get it sorted quickly!

First, Let's Diagnose the Root Causes #

From your description, two key issues stand out:

• Blank page with only favicon/site name: Likely your Nginx root path isn't pointing to the built dist directory (you're pointing to the source code folder instead of the compiled output).
• 404 on subroutes like /oneview: If your Vue app uses history mode for routing (instead of hash mode), Nginx doesn't know to redirect those requests to index.html—it tries to look for a physical file/directory that doesn't exist.

Step 1: Verify Your Vue Project Setup #

1. Check your router configuration in src/router/index.js:

   const router = new VueRouter({
     mode: 'history', // This is the main culprit for subroute 404s
     routes: [...]
   })
   

2. Confirm your build output: When you ran node build/build.js, it should have generated a dist folder at /var/www/html/maak-web/maak_web/dist/—this folder contains the compiled index.html and static assets your app needs to run.

Step 2: Fix Nginx Configuration #

Let's update your Nginx default site config to handle SPA routing correctly:

1. Back up your current config first (just in case):

   sudo cp /etc/nginx/sites-available/default /etc/nginx/sites-available/default.bak
   

2. Edit the default config file:

   sudo nano /etc/nginx/sites-available/default
   

3. Update the root directive to point to your dist folder (not the source code directory):

   root /var/www/html/maak-web/maak_web/dist;
   

4. Modify the location / block to add try_files—this tells Nginx to serve existing files, and redirect all other requests to index.html (so Vue Router can handle them):

   location / {
       try_files $uri $uri/ /index.html;
       # Keep your existing proxy/headers config if you have it
   }
   

5. Ensure Nginx has permissions to access the dist folder:

   sudo chown -R www-data:www-data /var/www/html/maak-web/maak_web/dist/
   

6. Test the config for errors, then restart Nginx:

   sudo nginx -t
   sudo systemctl restart nginx
   

Step 3: Troubleshoot the Blank Page (If It Persists) #

If the page is still blank after the above steps, open your browser's DevTools (F12) and check:

• Console tab: Look for JavaScript errors (e.g., missing assets, incorrect paths).
• Network tab: Verify that static/js and static/css files are loading correctly (check their URLs match your Nginx setup).
• Double-check your Vue project's config/index.js build settings: Ensure assetsPublicPath is set to '/' (if deploying at your domain root) or the correct subdirectory path if needed.

Why This Works #

Vue SPAs using history mode rely on the client-side router to handle navigation. When a user directly visits a subroute like /oneview, Nginx initially tries to find a physical file at that path—which doesn't exist. The try_files rule fixes this by sending all non-existent paths to index.html, letting Vue Router take over and load the correct component.

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