Vue.js部署Heroku后直接访问页面报404（内部链接正常）

Hey there! This is a super common gotcha with Vue single-page applications (SPAs) deployed to Heroku, and it boils down to how client-side routing interacts with the server's request handling. Let me break this down for you:

Why This Happens #

• When you use router.push to navigate between pages, Vue's client-side router is handling everything—no new request gets sent to the Heroku server. It just swaps out components dynamically in the browser.
• But when you type a URL like /any-page directly into the browser or refresh the page, the browser sends a full request to Heroku asking for that specific path. Since your Vue SPA only has one actual HTML file (index.html in the dist folder), the server can't find a file at /any-page and throws a 404.

How to Fix It #

We need to configure the Heroku server to redirect all requests to index.html, so Vue Router can take over handling the route. Here are the two most common solutions depending on your setup:

Solution 1: Use an Express Server (For Custom Server Setups) #

If you're using a Node.js/Express server to serve your Vue app, add a catch-all route that returns index.html for any request:

1. Create a server.js file in your project root:

   const express = require('express');
   const path = require('path');
   const app = express();
   
   // Serve static files from the dist folder
   app.use(express.static(path.join(__dirname, 'dist')));
   
   // Catch all routes and return the index.html file
   app.get('*', (req, res) => {
     res.sendFile(path.join(__dirname, 'dist', 'index.html'));
   });
   
   // Use the port provided by Heroku or default to 3000
   const port = process.env.PORT || 3000;
   app.listen(port, () => {
     console.log(`Server running on port ${port}`);
   });
   

2. Update your package.json scripts and dependencies:

   • Install Express: npm install express --save
   • Add/modify these scripts and engine specs:

     "scripts": {
       "start": "node server.js",
       "build": "vue-cli-service build",
       "postinstall": "npm run build"
     },
     "engines": {
       "node": ">=14.0.0",
       "npm": ">=6.0.0"
     }
     

   The postinstall script tells Heroku to build your Vue app automatically during deployment, and engines ensures Heroku uses a compatible Node version.

Solution 2: Use static.json (For Static Site Deployments) #

If you're deploying just the dist folder as a static site on Heroku, create a static.json file in your project root to rewrite all routes to index.html:

{
  "root": "dist",
  "clean_urls": false,
  "routes": {
    "/**": "index.html"
  }
}

This file tells Heroku's static file server to route every request to your SPA's main HTML file, letting Vue Router handle the rest.

Quick Local Test #

Before deploying to Heroku, test the fix locally:

1. Run npm run build to generate the dist folder.
2. If using the Express server, run npm start and visit http://localhost:3000/any-page—it should load correctly instead of 404ing.

Bonus: Vue Router Mode Note #

Make sure your Vue Router is set to history mode (for clean URLs without #) in router/index.js:

const router = new VueRouter({
  mode: 'history',
  routes: [...]
});

If you use hash mode, you won't get 404s, but your URLs will have /#/ prefixes (e.g., https://your-app.herokuapp.com/#/any-page).

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