vue项目页面刷新后报404的解决方法

// 如果使用 history 模式，需要服务器配置
const router = new VueRouter({
  mode: 'history', // 需要服务器支持
  // mode: 'hash',  // 直接访问不会有问题，但URL有#号
  routes: [...]
})

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 router = new VueRouter({
  mode: 'hash', // URL会包含 #/path
  routes: [...]
})

module.exports = {
  devServer: {
    historyApiFallback: true,
    // 或者更详细的配置
    historyApiFallback: {
      rewrites: [
        { from: /.*/, to: '/index.html' }
      ]
    }
  }
}

console.log(router.mode) // 查看是 history 还是 hash

// 确保路由正确定义
const routes = [
  {
    path: '/your-path', // 你访问的路径
    component: YourComponent,
    name: 'YourRoute'
  }
]

<template>
  <!-- 这两种方式应该都能工作 -->
  <router-link to="/your-path">跳转</router-link>
  <button @click="$router.push('/your-path')">编程式导航</button>
</template>

// router.js
const routes = [
  {
    path: '/user/:id',
    component: UserProfile,
    name: 'user'
  }
]

// vue.config.js
module.exports = {
  devServer: {
    historyApiFallback: true
  },
  // 生产环境构建路径
  publicPath: process.env.NODE_ENV === 'production' ? '/' : '/'
}