首页
友链
壁纸
留言
今日热榜
更多
关于
时光
推荐
精品流量卡
Search
1
都二十多年了,你的梦为什么还没碎!
57,100 阅读
2
2022年5个好用的 BT/ 磁力链接下载工具推荐 |Windows 、安卓系统
37,476 阅读
3
nps内网穿透实现外网访问树莓派
32,440 阅读
4
实践利用宝塔建emlog个人博客-超详细【原创】
26,142 阅读
5
Typecho-Joe-Theme主题帮助文档
24,679 阅读
闲杂乱码
Python
网站源码
微信小程序
娱乐分享
Is相册
软件工具
登录
Search
标签搜索
PHP
HTML
API
Javascript
源码
JS
Vue
Github
CloudFlare
接口
函数
SQL
ASP.NET
MVC
EF
T4模板
后台管理
CDN
微信小程序
MAC
韩小韩
累计撰写
262
篇文章
累计收到
1,307
条评论
首页
栏目
闲杂乱码
Python
网站源码
微信小程序
娱乐分享
Is相册
软件工具
页面
友链
壁纸
留言
今日热榜
关于
时光
推荐
精品流量卡
搜索到
1
篇与
空白页
的结果
2023-08-11
Vue3项目Build后部署在Nginx上F5刷新页面空白或404
环境{callout color="#4def9b"}vue-cli 5.xvue-router 4.xNginx{/callout}综述{callout color="#4d60ef"}使用Vue3项目Vue-router4开发完毕后项目Build打包部署线上环境后,首页能正常访问菜单内点击切换也没有问题,但当你刷新页面后,则出现 404 Not Found,故在此记录一下解决办法{/callout}解决思路{callout color="#f34444"}在与chatGPT进行深刻激烈的探讨后,确定了是Nginx的问题,根据chatGPT的引导进行配置依旧无法解决,刷新页面时访问的资源在服务端找不到,因为此时vue-router设置路由地址被当作url地址,此时的地址路径肯定不是真实存在的,所以出现404现象。之所以出现上面的现象,是因为在nginx配置的根目录/www/wwwroot/dist下面压根没有'XXX/xxx/xxx'这个真实资源存在,这些访问资源都是在js里渲染的。{/callout}服务端nginx的一开始配置如下(假设域名为:www.vvhan.com): server { listen 80; server_name www.vvhan.com; index index.html; root /www/wwwroot/dist; }如上出现404的原因是由于在这个域名根目录/www/wwwroot/dist下面压根就没有'XXX/xxx/xxx'这个真实目录存在。解决问题在服务端nginx配置里添加vue-route的跳转设置,正确配置如下: server { listen 80; server_name www.vvhan.com; index index.html; root /www/wwwroot/dist; #vue-router配置 location / { try_files $uri $uri/ @router; index index.html; } location @router { rewrite ^.*$ /index.html last; } }{callout color="#efa44d"}重启 nginx 后,问题就迎刃而解了。{/callout}
2023年08月11日
7,975 阅读
2 评论
0 点赞