Vue单页应用路由404的问题分析与解决方案

server {
    listen 80;
    server_name aaa.com;
    root /path/to/dist;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;  # 关键配置
    }
}

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

const express = require('express');
const path = require('path');
const app = express();

app.use(express.static(path.join(__dirname, 'dist')));
app.get('*', (req, res) => {
    res.sendFile(path.join(__dirname, 'dist', 'index.html'));
});

app.listen(3000);

import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

const router = new VueRouter({
    mode: 'hash',  // 启用Hash模式
    routes: [
        { path: '/', redirect: '/contract' },
        {
            path: '/contract',
            name: 'contract',
            component: () => import('../views/contract/index.vue')
        }
    ]
});

export default router;

module.exports = {
    publicPath: process.env.NODE_ENV === 'production' ? '/' : '/',
    // 其他配置...
};