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

一、Vue项目部署步骤

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

• 构建项目：Vue项目构建后生成一系列静态文件。
  
• 上传文件：使用scp命令将构建好的文件上传至服务器的web容器指定静态目录。
  1. scp dist.zip user@host:/xx/xx/xx

  复制代码
• 配置Web服务器：以Nginx为例，配置服务器以指向静态文件目录。
  1. server {
  2.   listen 80;
  3.   server_name www.xxx.com;
  4.   location / {
  5.     index /data/dist/index.html;
  6.   }
  7. }

  复制代码
• 重启Nginx：检查配置并重启Nginx以应用更改。
  1. nginx -t
  2. nginx -s reload

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

二、404错误缘故原由及办理方案

错误场景

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

缘故原由分析

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

办理方案

• 修改Nginx配置：配置全部页面请求都重定向到index.html，交由前端路由处置惩罚。
  1. server {
  2.   listen 80;
  3.   server_name www.xxx.com;
  4.   location / {
  5.     index /data/dist/index.html;
  6.     try_files $uri $uri/ /index.html;
  7.   }
  8. }

  复制代码
  修改后重启Nginx。
  1. nginx -s reload

  复制代码
• 覆盖全部路由：在Vue应用中覆盖全部路由情况，并提供404页面。
  1. const router = new VueRouter({
  2.   mode: 'history',
  3.   routes: [
  4.     { path: '*', component: NotFoundComponent }
  5.   ]
  6. })

  复制代码

其他后端配置方案（如Apache、Node.js）的焦点头脑雷同，本文不再详述。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。