网站上线中遇到的问题(跨域,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
注释掉就可以解决掉这个问题了