vue3+ts+history路由模式项目打包部署后刷新显示页面404

本地部署

最近本博主的做了一个医疗的前端开发项目，已经完工了，下面是对部署过程的总结和项目打包部署后刷新显示页面404问题的解决方案

打包生成dist文件夹

pnpm run build
// or
yarn build
// or
npm run build

生成后包含一下几个目录

注意由于我项目中使用的是ts而不是js所以有些问题在开发环境中打包部署不会报错，但是到开发环境中会报错比如博主遇到的这个小问题

这个报错的原因呢是因为博主自己定义showPopup是一个需要传参的函数但是博主并没有给他传参这个在开发环境不会直接报错除非打开当前这个函数的页面，解决方法传入响应参数即可，再比如

因为引入的类型并没有被使用所以报错，但是在开发环境只是一个警告而不会直接中断项目的运行，解决方法也很简单直接将没有使用的类型删除即可

下载PM2

npm install pm2 -g
// or
yarn add pm2 -g
//or
pnpm add pm2 -g

进入dist：

# pm2 serve 目录 端口  --name 服务名称
pm2 serve ./ 8080 --name my-cp-server

出现如下界面即代表部署成功

部署成功之后我刷新了一下发现页面找不到了报错404 Not Found

出现这个错误的原因是由于我们的项目不是运行在localhost:8080/home 而是运行在localhost:8080

以前我们使用的是hash模式不会有这个错误的原因是hash模式服务器部署目录和页面之间会有一个#区分，但是这次使用的是history模式刷新之后浏览器会认为localhost:8080/home是我们的项目运行的目录而不是前端路由路径，实际上并不存在这个目录浏览器找不到就报错404了

解决方式

解决：遇见子路径且没有后缀名，服务器定位到 ‘index.html’ 页面返回给前端即可。

//运行
pm2 serve --spa ./ 8080 --name my-cp-server

刷新不报错404成功解决这个问题 

使用腾讯云自动化构建部署

腾讯云的Web 应用提供一站式托管服务，支持静态网站托管，提供默认域名、自定义域名、HTTPS 和 CDN 加速等功能，提升 Web 应用的性能和安全性，此外还提供基于 Git 的工作流、DevOps 流程和加速开发部署流程，这样的话我们就可以只关注与代码相关的事情了，而不需要在每次更新手动打包，手动上传代码了，但是一般是需要付费的具体流程如下。

首先购买一个web应用托管服务

购买完成之后我们来到腾讯云控制台

 

搜索web应用托管

点击设置进入应用授权

 选择自己的代码仓库的所在平台进行授权，授权完成，新建应用选择从git仓库导入

导入仓库后点击部署应用即可

 

但是目前这种方式无法构建基于vite打包的前端项目所以如果想要部署基于vite打包的vue3的项目可以使用下面的方式

 轻量应用云服务器部署

本次本博主采用阿贝云的轻量应用云服务器部署项目，其他云服务器操作步骤大同小异。

阿贝云是可以免费申请一台云服务器的在控制台中点击产品->免费产品->免费云服务器即可免费开通然后点击管理面板给我们的服务器安装操作系统和宝塔面板，我们将基于宝塔面板可视化的去部署我们的vue项目

这里尽量选择跟博主一样的版本不然可能有坑,安装完成之后，进入宝塔面板

 进入宝塔面板

 这里的密码是操作系统密码

 登录页面

 填写宝塔的账号和密码如果没有注册一个来到首页

点击软件商店安装nginx 

点击文件上传已经打包好的vue代码

安装完成后点击网站添加站点这里的域名如果你自己有域名填写自己的没有就填写你申请的服务器的ip地址加上端口号

 选择根目录到你上传的dist目录即可

其他默认选项保持不变即可，完成之后就可以使用ip地址或域名访问了，如果你在开发时设置的路由模式时history，刷洗后会报错404

解决方法就是点击网站设置

点击配置文件在配置文件中的server节点添加如下配置

    root /www/wwwroot/dist;
    location / {
             try_files $uri $uri/ @router; #检测文件存在性重定向到首页目录    防止404
             index  index.html;
     }
     location @router {
             rewrite ^.*$ /index.html last;
     }

 即可解决vuehistory模式刷新报错404的问题