vue.js - vue-router使用history模式后首页无法渲染，一片空白，怎么解决？

问题描述

问 题

vue-router改为history模式后，需要后台服务器配置一些东西，不然访问 http://oursite.com/user/id ，就会出现404错误。但是我现在却连首页无法渲染出来，代码看起来已经加载完成，却还是一片空白。这种情况是正常情况吗？（暂时后台服务器还没有配置官网说的那些代码）

我现在的前端代码放在html文件夹里，也就是说这样才可以访问 http://xxx.com/html/。

解决方案

• hash mode的时候，#号后面的所有内容，服务器是不处理的，然后被index.html捕获了，通过index.html里的Vue-router插件解析，分配到对应的视图

• history mode的时候，由于没有了#号，所以服务器优先处理URL，整个地址包括原来#号后面不处理的部分，也都是交由服务器路由处理了，所以服务器默认会去对应的地址找文件

• 然而，服务器上根本没有这个文件，hash mode下，这个路径是由index.html里的vue-router分配的视图显示出来的，而服务器找不到对应的文件，就报错404了

• 你这个看起来并不正常，因为看起来是打开了index.html，但是原本#后面的部分，没有成功传给index.html

• 服务器的配置，需要匹配到原本#后面对应的地方，然后转发给index.html，这样，才能被index.html里面的vue-router识别，从而分配到对应的视图上面去

这篇关于vue.js - vue-router使用history模式后首页无法渲染，一片空白，怎么解决？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！