Vue3 History模式刷新404问题的原因分析和解决方案

import { createRouter, createWebHistory } from 'vue-router'

const routes = [
  {
    path: '/',
    name: 'home',
    component: () => import('../views/HomeView.vue'),
    meta: { title: '自用工具' }
  },
  {
    path: '/xinlan',
    name: 'xinlan',
    component: () => import('../views/xinlansearch.vue'),
    meta: { title: '心蓝查询' }
  },
  {
    path: '/hongyou',
    name: 'hongyou',
    component: () => import('../views/hongyousearch.vue'),
    meta: { title: '红邮查询' }
  },
  {
    path: '/ip',
    name: 'ip',
    component: () => import('../views/ipgenerate.vue'),
    meta: { title: 'IP生成' }
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

// 页面标题设置
router.beforeEach((to, from, next) => {
  document.title = to.meta.title || 'RentHub'
  next()
})

export default router

server {
    listen 88; # 对应项目访问端口
    server_name 192.168.1.137; # 服务器内网/外网IP
    root /path/to/your/vue/dist; # 替换为Vue项目打包后的dist目录绝对路径
    index index.html; # 默认首页

    # 核心规则：解决History模式刷新404
    location / {
        try_files $uri $uri/ /index.html; # 优先找静态文件，找不到则返回index.html
    }

    # 可选：静态资源缓存（优化加载速度）
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
        expires 7d; # 缓存7天
        add_header Cache-Control "public, max-age=604800";
    }
}

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

// 指向Vue打包后的dist目录
const distPath = path.join(__dirname, 'dist');
app.use(express.static(distPath));

// History模式兜底规则
app.get('*', (req, res) => {
  res.sendFile(path.join(distPath, 'index.html'));
});

// 监听88端口
app.listen(88, '192.168.1.137', () => {
  console.log('Vue3项目运行在 http://192.168.1.137:88');
});

module.exports = {
  devServer: {
    port: 88,
    host: '192.168.1.137',
    historyApiFallback: true, // 开启History模式兜底
    allowedHosts: 'all' // 允许内网访问
  }
};