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注释掉就可以解决掉这个问题了

相关推荐
童先生3 小时前
Nginx + Vue/React 前端 + API:防止路径混淆漏洞与跨域问题实战分享
前端·vue.js·nginx
22:30Plane-Moon8 小时前
项目1总结其三(图片上传功能)
ide·spring boot·vue
2501_9200470314 小时前
nginx-自制证书实现
运维·windows·nginx·https
阿࿆杰࿆17 小时前
solon-flow基于bpmnJs的流程设计器
vue·流程图·react
鹧鸪yy2 天前
认识Node.js及其与 Nginx 前端项目区别
前端·nginx·node.js
__lll_2 天前
Nginx proxy_pass 404/502 根源:漏写末尾斜杠 / 的修复指南
nginx
麦麦大数据2 天前
F003疫情传染病数据可视化vue+flask+mysql
mysql·flask·vue·大屏·传染病
Clownseven3 天前
Docker+Nginx+Node.js实战教程:从零搭建高可用的前后端分离项目
nginx·docker·node.js
水冗水孚4 天前
图文并茂讲解nginx中http升级https(部署SSL证书)知识点总结
nginx·http·https
知识分享小能手4 天前
Vue3 学习教程,从入门到精通,Axios 在 Vue 3 中的使用指南(37)
前端·javascript·vue.js·学习·typescript·vue·vue3