vue打包部署遇到的问题

网站上线中遇到的问题(跨域,404,空白页解决方案)

因为本人是后端开发工程师,对前端开发不了解,踩了很多坑,所以将踩过的坑分享出来,以供参考

网站地址:这里

这段时间将项目部署到服务器中引发了几个问题

第一个问题:跨域

一般跨域是由后端来解决的,但是由于项目中加入了追踪请求的日志,频繁options会使后台服务多一些无用的请求日志,所以使用nginx来做跨域

在对应的后端api的location块儿中增加Access-Control-Allow-Origin、Access-Control-Allow-Methods、Access-Control-Allow-Credentials、Access-Control-Allow-Headers,然后判断请求方法为options则返回204状态码

第二个问题:404

将vue项目打包部署到服务器后访问网站,当点击某个页面,然后刷新此网页时会有404错误(图1和图2),解决方法还是修改nginx配置文件

图一:

图二:

我的nginx配置为:

关键点是try_files $uri $uri/ /index.html;,这段的意思是nginx服务器会先尝试在本地查找你请求的uri地址,若请求不到则交给vue的路由处理

第三个问题:空白页

不知道因为什么在vue.config.js的配置中加入了

在生产环境中打包后出现了这个问题:Uncaught SyntaxError: Unexpected token '<' (at chunk-vendors.f35dccd9.js:1:1)

通过https://blog.csdn.net/HeXinT/article/details/125082562找到了解决方案,将publicPath注释掉就可以解决掉这个问题了

相关推荐
2601_965619694 小时前
AI视频制作:财经数据可视化视频怎么做:AI 自动生成图表动画的实操流程
人工智能·nginx·音视频
2601_965619694 小时前
历史解说视频怎么做:青铜器瓷器文物画面自动对齐的完整教程
运维·nginx·音视频
姜鱼问生18 小时前
每次开机手动检查 6 样东西?我写了个 2 秒自检脚本
运维·网络·nginx·docker·容器
那年那棵树20 小时前
基于WebGis的人生如旅地图系统
前端·arcgis·vue·课程设计
xixingzhe22 天前
Nginx 看懂请求耗时瓶颈
服务器·前端·nginx
北风toto2 天前
Windows 下用 OpenSSL 生成 SSL 密钥并配置 Nginx 教程
windows·nginx·ssl
卜锦元2 天前
Docker Compose 部署 Nginx 1.30.6 完整指南
nginx·docker·容器
小小龙学IT2 天前
Nginx 开源 Web 服务器与反向代理深度解
前端·nginx·开源
Coisinier3 天前
docker命令管理镜像及容器
linux·运维·nginx·docker·容器·操作系统
2301_32241428043 天前
基于web的校园失物招领管理系统59695-计算机毕设 原创(免费领源码+部署教程+开发环境)
mysql·nginx·php·apache·thinkphp·phpstudy·wampserver