vue打包部署遇到的问题

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

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

网站地址:这里

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

第一个问题:跨域

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

在对应的后端apilocation块儿中增加Access-Control-Allow-OriginAccess-Control-Allow-MethodsAccess-Control-Allow-CredentialsAccess-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注释掉就可以解决掉这个问题了

相关推荐
moMo1 小时前
从“巨轮”到“本地开发”:用 Docker 和 Nginx 解决你的端口焦虑
nginx·docker
常宇佳3 小时前
vue3 @代指src路径设置
前端·typescript·vue
蜀道山老天师3 小时前
Zabbix监控Apache与Nginx应用实践完整指南
linux·运维·nginx·apache·zabbix
北城笑笑6 小时前
Server 18 ,Nginx + Vite 前端部署排错实战:从 `/api/gpt/chat` 404 到 9012 后端服务的完整定位过程
linux·运维·前端·nginx·ubuntu·vue
fatcoder1 天前
玩转Nginx 04 — 反向代理:给 nginx 接上后端
前端·后端·nginx
fatcoder1 天前
玩转Nginx 03 — location 匹配规则:让不同的路径各回各家
前端·后端·nginx
王坊兴1 天前
Ubuntu 部署产品原型静态服务器:SFTP + Nginx
服务器·nginx·ubuntu
烬羽1 天前
nginx 里写 localhost 反而 502?一条请求带你彻底搞懂 Docker 端口映射与反向代理
nginx·docker·程序员
小林ixn1 天前
Docker + Nginx 反向代理:从“我电脑能跑”到“哪里都能跑”
nginx·docker·容器
CDN3601 天前
源站隐藏实操:出海网站 IP 暴露、被扫描打源,CDN+Nginx 白名单加固方案
网络·tcp/ip·nginx·源站隐藏·cdn防护