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路径改为绝对路径。

然后打包

现在已经是绝对路径了，我们再试试刷新。

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

转载于:https://juejin.im/post/5c243179e51d450cfe736fb3