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

相关推荐
北城笑笑1 天前
Vue 109 ,从零搭建 Vue3 + Electron 工程:生态、安全桥接与打包选型( Vue + Electron )
前端·javascript·vue.js·安全·electron·vue
Csvn3 天前
安装、升级与目录结构
后端·nginx
上海懒图科技3 天前
工厂厂区电子地图定位导航:厂区人车精准定位,安全合规双保障
前端·arcgis·vue
Csvn4 天前
认识 Nginx
后端·nginx
陈希1235 天前
Nginx 从入门到能扛事:反向代理、负载均衡与 HTTPS 实战
nginx·https·负载均衡
木头左6 天前
【Nginx】内网服务源 IP 白名单实战:动态域名解析放行网段 + 端口接管零改造
运维·nginx·白名单·反向代理
skywalk81636 天前
把 去也网站 从 Ubuntu 搬到 FreeBSD:一次 Service Jail + nginx 的部署实录
linux·运维·nginx·ubuntu·freebsd
没差c6 天前
winsw将jar、nginx等注册为Windows服务
windows·nginx·jar
卋罖7506 天前
Razor 视图 + JavaScript + Vue/iView 组件实现的表格自定义列
javascript·vue·iview·razor视图
Lsetea8 天前
Docker更新SSL证书后容器仍读旧文件:单文件挂载与目录挂载排查
运维·nginx·docker·https·ssl证书