| |
|
开发:
C++知识库
Java知识库
JavaScript
Python
PHP知识库
人工智能
区块链
大数据
移动开发
嵌入式
开发工具
数据结构与算法
开发测试
游戏开发
网络协议
系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程 数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁 |
-> 系统运维 -> vue中history模式egg后台宝塔上线后刷新nginx报错404 -> 正文阅读 |
|
[系统运维]vue中history模式egg后台宝塔上线后刷新nginx报错404 |
我们都知道vue中路由有两种模式:hash模式和history模式,我也尝试了history模式,但是项目上线项目上线之后每每刷新nginx就会报错404,最后我在网上找了尝试了一圈都没有解决问题。最后含泪换回hash模式,但是看着长长一串的url,还有个扎眼的#号,十分的难看,但在hash模式下刷新不会404。最后我也是在一位前辈的帮助下找到了解决的方法,感谢前辈 @易路先登?。 hash模式下的url在后台请求之后#之前的内容还是存在与此次请求中的,因此每一次请求都会返回index.html页面,这样路由就交给了前端处理。那么同样也是路由的history模式却没有hash的功能,没有#号(例如你的页面为www.newurl.com/home,使用history的话在你的egg后台的router中并没有这个接口,所以刷新之后直接返回了404),更没有在请求中有一些方式能把路由交给前端处理,所以,我们在后台配置中吧路由配置成交由前段去处理,下面我给出了两种处理方法。 1、使用hash模式切换hash模式十分简单,只需要在vue的路由配置文件中 63行mode这里改为‘hash’即可 2、使用history模式nginx配置切换history模式同样跟上面切换hash的一个地方,把hash改为history即可,但这只是完成了第一步。 ?我使用的是宝塔面板,使用宝塔。第二步 egg的静态资源直接放在app下的public文件夹中(直接打包好吧dist拖进去即可) ?同时配置两个地方第一个是config文件下的config.default.js文件夹下,吧你放静态页的地方指向过去,如果你做的方法没错直接复制即可,如果未知不同的话就引入你放静态页的位置
第二个配置在router中redirect重定向到index.html,定位到前端首页 ?第三部,配置nginx,使用宝塔的话nginx的配置十分方便,在试过一圈之后,我发现vue官网给出的方法十分的正确
放在这个域名的默认配置文件下 重启nginx(一定要重启,不重启没效果,在配置nginx的时候最好没配置一项就重启一次),一般刚注册宝塔就会让你下载nginx,把他放在宝塔首页里,一键重启。? 之后就搞定了,如果大家使用数据库的话,使用nginx反向代理egg的http://localhost:7001,再次重启ngxin,pm2重启(pm2是个管理工具,它能够管理egg项目的启动,但是使用pm2的话需要在egg中写相应的启动文件,大家可以自行百度),然后就搞定了。 再访问页面,怎么刷新也不会出现问题了,url上也没有了难看的#号,清爽了不少 ? ? ? |
|
|
上一篇文章 查看所有文章 |
|
开发:
C++知识库
Java知识库
JavaScript
Python
PHP知识库
人工智能
区块链
大数据
移动开发
嵌入式
开发工具
数据结构与算法
开发测试
游戏开发
网络协议
系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程 数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁 |
360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 | -2024/11/15 6:19:33- |
|
网站联系: qq:121756557 email:121756557@qq.com IT数码 |