vue项目中路径中为什么默认有index.html#

• 使用vue开发了很多手机app还有微信公众号页面，开始的时候一直都是在以完成项目为目的，没有去思考一些东西，只知道怎么去用，发现成长的太慢了。一段时间没有去开发vue的项目，突然有一天一个同事过来问我项目是不是出错了，搞了半天也没有找到问题，只是访问项目的时候浏览器页面一片空白，于是细心地去看了一下，后来想了一下该准备的东西都准备了，也没有报错是不是路径的问题，后来发现真的是这么回事，在访问的时候缺少index.html#。
• 为什么有index.html？

main.js是我们的入口文件，主要作用是初始化vue实例并使用需要的插件，这里new Vue代表新建vue对象。App.vue是我们的主组件，所有页面都是在App.vue下进行切换的。vue中的页面都是单页面，但是都是index.html上承载的，这就是为什么你能在index.html中看到id为app的div，其实就是和App.vue对应，App.vue里面的标签将会把路由相关内容（index.js）渲染在这个地方，总之index.html是项目运行的入口。

项目加载的过程是index.tml->main.js->app.vue->index.js->单页面（XXX.vue）

index.html

main.js

app.vue

index.js

• 项目地址上的#是哪来的呢，好像没有地方配置啊。

这是因为vue是单页面应用的原因，在前进或后退的时候使用这种方式将保持路径的正确性，#是vue的hash模式，这是一种默认的方式。如果想去掉这个#，可以将hash模式改成history模式，即在index.js中加上mode: “history”,如下图：