我们都知道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上也没有了难看的#号,清爽了不少
?
?
?
|