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 {
    listen       80;
    server_name  yourdomain.com;
    
    location / {
        root   /path/to/your/project/dist;
        index  index.html index.htm;
        
        # 核心解决代码 ▼
        try_files $uri $uri/ /index.html;
    }

    # 处理静态资源缓存（可选优化）
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf)$ {
        expires 1y;
        add_header Cache-Control "public, no-transform";
    }
}

宝塔面板的话直接在网站上加入下面的伪静态规则：

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/' })

• 服务端渲染：如果使用SSR（如Nuxt.js），需要不同的服务端配置

---

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