vue-router 默认 hash 模式，使用 URL 的 hash 来模拟一个完整的 URL，好处是当 URL 改变时，页面不会重新加载。

但是之前碰到一个项目，需要解析路径，然后项目路径自带的 # 非常影响体验。下面就让我来唠叨唠叨如何去掉这个 # 吧

修改 VueRouter

export detault new Router({
	mode: 'history',
	routers: [{
		path: '/login',
		name: 'Login',
		component: Login
	},...]
})

当配置了mode: 'history'，URL 就由原先的http://yoursite.com/#/login变为http://yousite.com/login了。

如果直接由链接跳转，页面完全没有问题，但是如果你在跳转后的页面刷新，或者直接访问页面，就会返回404。所以，如果配置了mode: 'history'，就需要后台配置支持。

后台配置

我用的是PHPstudy的程序集成包，下载地址在这里，安装完PHPstudy后，默认采用的是Apache和MySql模式的，虽然Vue的官网有提到apache如何配置，但是我配置完后，进入内部页面，刷新还是会出现404，所以这里只说Nginx的配置。

  1. 首先把PHPstudy的模式由Apache切换为Nginx，点击下图圈出位置选择模式，我的是php-5.2.17 + Nginx

    phpstudy

  2. 修改nginx.conf文件，点击 其他选项菜单 > 打开配置文件 > nginx-conf

    nginx

    内容修改如下：

    Origin New

    原理：正常访问网站时，是服务器通过我们的访问去帮忙解析路径，然后找到路径的对应位置，再返回请求。比如我们访问http://test.com/confirm，服务器就要在根目录下找到confirm的文件夹里面的index。但是我们build后的文件只含有static和index.html，所以肯定是找不到的，结果就会显示空白页面。所以需要将路由的控制权交给前端，服务器将所有的链接统统指向index.html，让vue-router来处理。

  3. 重启PHPstudy，404的问题就解决啦~撒花❀~

优化

相信很多小伙伴在www底下会放着很多项目，之前的配置直接修改了80端口的设置，会导致其他项目都无法被正常打开了，所以在此进行优化。 同样打开nginx-conf文件，保留原先的80端口默认的设置，并在下面复制一份，然后再修改。如下图

nginxFix

这样要访问该项目直接在浏览器输入localhost:9080即可，这样就不会影响其他项目，该怎么打开就怎么打开。