部署Vue项目到服务器后404错误

一、Vue项目部署步骤

在前后端分离的开发模式下，前端项目独立部署通常涉及以下步骤：

构建项目：Vue项目构建后生成一系列静态文件。

上传文件：使用scp命令将构建好的文件上传至服务器的web容器指定静态目录。

scp dist.zip user@host:/xx/xx/xx

配置Web服务器：以Nginx为例，配置服务器以指向静态文件目录。

server {
  listen 80;
  server_name www.xxx.com;
  location / {
    index /data/dist/index.html;
  }
}

重启Nginx：检查配置并重启Nginx以应用更改。

nginx -t
nginx -s reload

访问域名：在浏览器输入域名以访问部署的应用。 以上是最直接的一种部署方式。更高级的部署方式，如自动化、镜像、容器和流水线部署，本质上是将此逻辑抽象和程序化，本文不展开讨论。

二、404错误原因及解决方案

错误场景

• 问题描述：Vue项目在本地运行正常，但部署到服务器后刷新页面出现404错误。
• 错误定位：HTTP 404错误表示请求的资源不存在。

原因分析

• History模式问题：在Vue单页应用（SPA）中，所有用户交互通过动态重写当前页面实现。构建物只产出index.html，而nginx配置可能未涵盖所有路由。
• Hash模式无问题：Hash模式不会将hash值包含在HTTP请求中，因此不会因hash变化重新加载页面，避免了404错误。

解决方案

修改Nginx配置：配置所有页面请求都重定向到index.html，交由前端路由处理。

server {
  listen 80;
  server_name www.xxx.com;
  location / {
    index /data/dist/index.html;
    try_files $uri $uri/ /index.html;
  }
}

修改后重启Nginx。

nginx -s reload

覆盖所有路由：在Vue应用中覆盖所有路由情况，并提供404页面。

const router = new VueRouter({
  mode: 'history',
  routes: [
    { path: '*', component: NotFoundComponent }
  ]
})

其他后端配置方案（如Apache、Node.js）的核心思想类似，本文不再详述。