Vue.js + Node.js：History模式下服务端配置代码存放位置及生产环境疑问

Hey there! Let’s work through your questions step by step—no worries about being new to this, we’ve all been in your shoes when figuring out server configs for single-page apps!

Where to put the Node.js fallback server code? #

That Node.js snippet you have is a standalone HTTP server file, not something you drop into your Vue app files like main.js, router/index.js, or the build/config directories. Here’s exactly what to do:

1. Create a new file named server.js in your project’s root directory (same level as src/, package.json, and the dist/ folder that gets created after building).
2. Paste the code into server.js, but make one critical tweak: change index.htm to dist/index.html—this points to the production-ready index file that Vue webpack generates when you run npm run build.
3. To use it: first run npm run build to compile your app into static files, then run node server.js to start the server. You’ll be able to access your app at http://localhost (since the port is set to 80).

A quick side note for local development: you don’t even need this server! The Vue webpack template’s built-in dev server supports history mode out of the box. Just open config/index.js and set dev.historyApiFallback: true—this lets you use clean URLs during development without setting up a separate Node server.

Deployment to Heroku: Are there differences? #

Absolutely—Heroku has specific requirements, and there’s a simpler way to handle the fallback route than writing your own server. Here are two solid options:

Option 1: Use the serve package (easiest) #

• Install serve as a dev dependency: npm install --save-dev serve
• Open your package.json and add a start script:

  "scripts": {
    "start": "serve -s dist",
    "build": "node build/build.js",
    // ... keep your existing scripts
  }
  

  The -s flag tells serve to redirect all unmatched routes to dist/index.html—exactly what we need for history mode.
• Add a Procfile to your project root (no file extension) with this line:

  web: npm start
  

  This tells Heroku how to launch your app.

Option 2: Use a custom Express server (more flexible) #

If you prefer a custom setup, adapt your original code to work with Heroku’s dynamic environment:

• Install Express: npm install --save express
• Create a server.js like this:

  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')));
  
  // Fallback route for all unmatched requests
  app.get('*', (req, res) => {
    res.sendFile(path.join(__dirname, 'dist/index.html'));
  });
  
  // Use Heroku's dynamic port (never hardcode 80!)
  const port = process.env.PORT || 80;
  app.listen(port, () => {
    console.log(`Server running on port ${port}`);
  });
  

• Update your package.json start script to "start": "node server.js"
• Add the same Procfile as above: web: npm start

Key Heroku Tips: #

• Heroku assigns a dynamic port, so never hardcode port 80—always use process.env.PORT like in the example above.
• To let Heroku build your app automatically, add a heroku-postbuild script to package.json:

  "scripts": {
    // ...
    "heroku-postbuild": "npm run build"
  }
  

  This tells Heroku to compile your app after installing dependencies, so you don’t have to commit the dist/ folder to git.

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