网站上线中遇到的问题（跨域，404，空白页解决方案）

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

网站地址：
这里

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

第一个问题：跨域

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

image-20231012165033063

在对应的后端
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
配置文件

图一：

image-20231012170354648

图二：

image-20231012170500340

我的
nginx
配置为：

image-20231012170000040

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

第三个问题：空白页

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

image-20231012176666668425

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

image-20231012171439417

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

标签: none

添加新评论