部署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

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

二、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

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

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

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

到此这篇关于部署Vue项目到服务器后404错误的原因及解决方案的文章就介绍到这了,更多相关部署Vue到服务器后404内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！