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

相关推荐
胡斌附体1 小时前
vue父子组件通信的使用, 跟新v-model
vue·v-model·使用场景·emit·子父组件通信·change事件
水冗水孚3 小时前
🚀四种方案解决浏览器地址栏预览txt文本乱码问题🚀Content-Type: text/plain;没有charset=utf-8
javascript·nginx·node.js
苹果醋317 小时前
AI大模型竞赛升温:百度发布文心大模型4.5和X1
java·运维·spring boot·mysql·nginx
「、皓子~17 小时前
AI创作系列(2):UniApp跨端开发实战 - 海狸IM移动端完全由AI编写
开发语言·人工智能·uni-app·开源·vue·开源软件·ai编程
天外来物20 小时前
实战分享:用CI/CD实现持续部署
前端·nginx·docker
可观测性用观测云20 小时前
Ingress-nginx 接入可观测性最佳实践
nginx
sunshine_程序媛21 小时前
在Vue2项目中引入ElementUI详细步骤
前端·ui·elementui·前端框架·vue
Hello.Reader21 小时前
NGINX 四层 SSL/TLS 支持ngx_stream_ssl_module
运维·nginx·ssl
努力了吗梁同学1 天前
Nuxt3 中使用 pnpm 安装的 NuxtImg 使用会提示找不到图片
前端·vue·pnpm·nuxt·nuxtimg
sg_knight1 天前
Rollup vs Webpack 深度对比:前端构建工具终极指南
前端·javascript·webpack·node.js·vue·rollup·vite