vue项目地址栏自动加#

vue的路由在默认的hash模式下,url会带有一个#,不美观,而且在微信分享,授权登录等都会有一些坑.所以history模式（不带#号）也会有一些应用场景.
1、将路由配置成history模式的方法：

配置路由模式，例如：
export default new Router({
  mode: 'history',
  routes: [{
    path: '/',
    name: 'HelloWorld',
    component: HelloWorld
  }]
})
})
2、由于vue-router默认hash模式，有些后续问题需要处理

（1）变为history模式，子路由在刷新情况下会出现样式变乱的情况，解决方法是修改index.html文件中文件引入路径即可。
修改前：<link rel="stylesheet" href="./static/css/base.css">
修改后：<link rel="stylesheet" href="/static/css/base.css">

修改原理：

./ 是指用户所在的当前目录（相对路径）；

/ 是指根目录（绝对路径，项目根目录），也就是项目根目录；

对于hash模式，根路径是固定的，就是项目的根目录，但是history模式下，以 / 开头的嵌套路径会被当作根路径，所以使用“./”引入文件，就会找不到文件了，因为文件本身就是在项目根目录下的，并不在嵌套路径这个目录下。

总结，无论hash模式还是history模式，可以直接使用“/”从项目根目录引入静态文件。

（2）vue的路由在默认hash的模式下，默认打包一般不会有什么问题，但history模式打包后可能出现页面一片空白的情况，而且没有错误信息。
解决vue路由history模式打包后页面空白的解决方法