nginx服务器配置vue-router history模式（去除url中的#号）

前言：关于单页原理 hash模式和history模式 请自行查阅资料

-------
复制代码

按照vue-router官网的办法

https://router.vuejs.org/zh/guide/essentials/history-mode.html#后端配置例子

问题的原由是配置nginx后，发现页面刷新失败，报错：Uncaught SyntaxError: Unexpected token <

这里插一个坑：

try_files $uri $uri/ /index.html;
复制代码

不要加在跨域location中 会产生一些接口405或者没有数据的问题，至于缘由。。。我也不懂鸭

好吧回归征途

按照第一步，在路由启用history模式而且从新打包之后，打开浏览器发现页面url中的#号已经没有了，这时咱们随便进一个子路由刷新一下页面

意料之中出现了404

很好，按照文档在nginx配置项中 添加

try_files $uri $uri/ /index.html;
复制代码

而后重启，试试看。

如图，emmm。。 平常不按教程出结果，此次页面一片空白，右边控制台报错未知符号，像这种时候 咱们应该知道 这是文件类型不对 看看内容

为何会是html文件呢，加载的明明是js文件啊，因而在查阅了一些资料之后，能够产生这么一个猜测： js的路径出了问题，而后 try_files uri/ /index.html; 将路径重指向index.html，因而就变成了咱们看到的请求js文件 却返回了html的内容。看一下Network的请求路径：

很好 路径是错的，猜测初步正确，缘由嘛竟然是路径中参杂了子路由（insService）的路径，为何会这样呢 咱们打开index.html 看到了js的路径：

偶吼，竟然是个相对路径。那么很明显：问题是在子路由下按照相对路径请求js文件，因为子路由的路径在电脑的物理路径中是不存在的，因此产生加载404，而后nginx将这个js的404从新指向index 最后浏览器的解析js文件时却读到了html文件 因而就出现了前面的控制台报错 Unexpected token <，

固然这只是猜测，那咱们如今就尝试解决看看 办法就是把打包完的js路径改成绝对路径。

而后打包

如今已是绝对路径了，咱们再试试刷新。

很好 ， 页面已经成功刷新出来 问题解决