IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: 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文件夹下,吧你放静态页的地方指向过去,如果你做的方法没错直接复制即可,如果未知不同的话就引入你放静态页的位置

config.static = {
        prefix: '/',
        dir: [ 
	        path.join(__dirname, '../app/public/dist'), //上传文件等的目录
	        path.join(__dirname, '../dist') //放置前端打包后的文件
    ]}

第二个配置在router中redirect重定向到index.html,定位到前端首页

?第三部,配置nginx,使用宝塔的话nginx的配置十分方便,在试过一圈之后,我发现vue官网给出的方法十分的正确

location / {
  try_files $uri $uri/ /index.html;
}

放在这个域名的默认配置文件下

重启nginx(一定要重启,不重启没效果,在配置nginx的时候最好没配置一项就重启一次),一般刚注册宝塔就会让你下载nginx,把他放在宝塔首页里,一键重启。?

之后就搞定了,如果大家使用数据库的话,使用nginx反向代理egg的http://localhost:7001,再次重启ngxin,pm2重启(pm2是个管理工具,它能够管理egg项目的启动,但是使用pm2的话需要在egg中写相应的启动文件,大家可以自行百度),然后就搞定了。

再访问页面,怎么刷新也不会出现问题了,url上也没有了难看的#号,清爽了不少

?

?

?

  系统运维 最新文章
配置小型公司网络WLAN基本业务(AC通过三层
如何在交付运维过程中建立风险底线意识,提
快速传输大文件,怎么通过网络传大文件给对
从游戏服务端角度分析移动同步(状态同步)
MySQL使用MyCat实现分库分表
如何用DWDM射频光纤技术实现200公里外的站点
国内顺畅下载k8s.gcr.io的镜像
自动化测试appium
ctfshow ssrf
Linux操作系统学习之实用指令(Centos7/8均
上一篇文章           查看所有文章
加:2021-08-02 20:52:17  更:2021-08-02 20:52:31 
 
开发: 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-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码