解决Vue项目部署至服务器后报404的问题

😉 你好呀，我是爱编程的Sherry，很高兴在这里遇见你！我是一名拥有十多年开发经验的前端工程师。这一路走来，面对困难时也曾感到迷茫，凭借不懈的努力和坚持，重新找到了前进的方向。我的人生格言是——认准方向，坚持不懈，你终将迎来辉煌！欢迎关注我😁，我将在这里分享工作中积累的经验和心得，希望我的分享能够给你带来帮助。

引言

在使用Vue.js框架进行前端开发时，如果采用的是history模式的路由（即Vue Router中的history模式），部署到服务器后可能会遇到404错误。这是因为history模式下，应用的URL会看起来像是真实的服务器路径，而不是带有#的hash模式。当用户直接访问这些看起来像真实路径的URL时，服务器会尝试去查找对应的文件，而实际上这些文件并不存在，因此返回404错误。

原因分析

服务器配置问题

大多数Web服务器默认情况下不会对前端路由进行重写或代理，而是直接根据URL来寻找对应资源。对于history模式下的单页应用(SPA)，所有前端路由都应该是由同一个HTML入口文件处理，然后通过JavaScript动态改变页面内容而不重新加载整个页面。

静态文件未正确部署

确保你的构建输出（通常是dist目录）已正确上传到服务器，并且服务器配置指向了正确的目录。

解决方案

1. 修改服务器配置

你需要配置你的Web服务器，以便将所有请求重定向到你的index.html文件，这样Vue Router就可以接管并处理路由了。这里以Nginx为例说明如何配置：

server {
    listen 80;
    server_name yourdomain.com;

    location / {
        root /path/to/your/dist;
        try_files $uri $uri/ /index.html;
    }
}

这段配置告诉Nginx，如果找不到请求的文件，则重定向到index.html，让Vue Router处理。

2. 使用Hash模式

如果你暂时无法更改服务器配置，可以考虑将Vue Router模式改为hash模式。虽然这会影响URL的美观性，但它不需要任何特殊的服务器配置。

const router = new VueRouter({
  mode: 'hash',
  routes: [...]
})

3. 部署步骤

构建项目

在本地环境中运行npm run build或相应的构建命令，这将生成一个dist目录，里面包含了你的应用的所有静态文件。

上传文件

将dist目录中的所有文件上传到你的服务器上的指定位置。

配置Web服务器

如上所述，根据你使用的Web服务器类型（如Nginx、Apache等），正确配置服务器以支持history模式。

重启服务

完成上述步骤后，重启你的Web服务器以使配置生效。

通过以上步骤，你应该能够解决在history模式下部署Vue项目时遇到的404错误。