vue项目部署服务器后刷新页面404解决方案

相信很多小伙伴都遇到过，当开发的vue前端项目打包后部署到线上，刷新页面提示404的问题，这是因为Vue默认的hash路由模式（带#）不会出现404，但当使用history模式时，直接访问路由路径会触发服务器真实请求。下面就《vue项目部署服务器后刷新页面404解决方案》这个问题分享2个解决方案。

以下是针对Vue项目部署服务器后刷新404问题的解决方案，包含路由配置和Nginx服务端配置两个核心部分：

解决方法：

1. 在路由配置文件中明确指定history模式

// router/index.js
const router = new VueRouter({
  mode: 'history',  // 明确声明使用history模式
  routes: [...]
})

2. 添加通用路由回退（非必须，但推荐）

// 在路由配置最后添加
{
path: '*',
redirect: '/' // 或自定义404组件
}

二、Nginx服务器配置方案

核心原理：通过伪静态配置，将所有非静态资源请求重定向到index.html

在server{}里加入下面的规则

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

如果使用Apache服务器，添加.htaccess
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>

三、注意事项

1. 静态资源路径：确保Nginx配置的root路径指向正确的dist目录
2. 子目录部署：若项目部署在子路径（如/app/），需要同步修改：
   // vue.config.js
module.exports = {
publicPath: '/app/'
}
// router.js
const router = new VueRouter({
mode: 'history',
base: '/app/'
})
3. 服务端渲染：如果使用SSR（如Nuxt.js），需要不同的服务端配置

通过上述配置组合，既能保持URL美观（无#），又能确保路由跳转和刷新功能正常。建议同时保留404页面的处理逻辑，提升用户体验。