部署Vue.js应用后路由页面报404，webpack simple打包无index.htm文件

Hey there, let's break down and solve your two problems step by step—they're really common pitfalls when deploying Vue apps with the webpack-simple template, so we'll get this sorted out quickly.

First: Fix the Missing index.html in dist Folder #

The webpack-simple template is intentionally minimal, so it might not have the necessary plugin set up to generate index.html during the build process. Here's how to fix it:

1. Install the required plugin
   First, make sure html-webpack-plugin is installed. Run this command in your project root:

   npm install html-webpack-plugin --save-dev
   

2. Update your webpack.config.js
   Open up webpack.config.js and make these adjustments:

   • At the top of the file, import the plugin:

     const HtmlWebpackPlugin = require('html-webpack-plugin');
     

   • Locate or create the plugins array, then add this configuration to it:

     plugins: [
       new HtmlWebpackPlugin({
         template: './index.html', // Uses your project's root index.html as a template
         filename: 'index.html', // Name of the file generated in the dist folder
         inject: true // Automatically injects build.js into the HTML file
       })
     ]
     

   • Double-check your output configuration points correctly to the dist folder:

     output: {
       path: path.resolve(__dirname, './dist'),
       publicPath: '/',
       filename: 'build.js'
     }
     

3. Rebuild your project
   Run npm run build again. You should now see both build.js and index.html in your dist folder.

Second: Fix Route 404 Errors #

This issue almost always stems from using Vue Router's history mode (which removes the # from URLs) without configuring your server to redirect all requests back to index.html. Here are your two main solutions:

Option 1: Switch back to Hash Mode (No Server Changes Needed) #

If you don't want to adjust server settings, just revert to Vue Router's default hash mode. Update your router setup like this:

const router = new VueRouter({
  mode: 'hash', // This is the default, so you can even omit this line entirely
  routes: [/* your route definitions here */]
});

This will add a # to your URLs (e.g., yourdomain.com/#/about) and prevent 404 errors without any server tweaks.

Option 2: Configure Your Server for History Mode #

If you want clean URLs without the #, adjust your server's configuration to fallback to index.html for all non-existent paths:

For Nginx

Edit your site's Nginx config file and add this inside the location / block:

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

Save the file and restart Nginx to apply the changes.

For Apache

Create a .htaccess file in your dist folder (or project root if serving directly) with this content:

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

Ensure Apache's mod_rewrite module is enabled for this to work.

For Node.js (Express)

Install the connect-history-api-fallback middleware:

npm install connect-history-api-fallback --save

Then update your server code to use it:

const express = require('express');
const history = require('connect-history-api-fallback');
const app = express();

// Handle history mode routing fallback
app.use(history());
// Serve static files from the dist folder
app.use(express.static(__dirname + '/dist'));

app.listen(3000, () => {
  console.log('Server running on port 3000');
});

Once you've fixed both issues, redeploy your dist folder to your server and everything should work smoothly!

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