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

Table of Contents

• 一、Vue项目部署步骤
• 二、404错误原因及解决方案
• 错误场景
• 原因分析
• 解决方案

一、Vue项目部署步骤

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

1. 构建项目：Vue项目构建后生成一系列静态文件。
2. 上传文件：使用scp命令将构建好的文件上传至服务器的web容器指定静态目录。

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

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

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

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

   nginx -t
   nginx -s reload
   

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

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

错误场景

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

原因分析

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

解决方案

1. 修改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
   

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

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

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