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

栏目: 服务器 · Nginx · 发布时间: 7年前

内容简介:按照vue-router官网的办法配置后,发现在本地页面刷新失败了,报错:Uncaught SyntaxError: Unexpected token <

按照vue-router官网的办法

router.vuejs.org/zh/guide/es…

配置后,发现在本地页面刷新失败了,报错:Uncaught SyntaxError: Unexpected token <

这里插一个坑:

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

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

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

还是接着说try—files

在路由启用history模式以后,发现页面的中的#号已经不会被默认添加,我们随便进一个子路由刷新一下页面

意料之中出现了404

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

很好,按照文档 添加

try_files $uri $uri/ /index.html;
复制代码
nginx服务器配置vue-router history模式(去除url中的#号)

然后重启,试试看。

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

如图,emmm。。很好 又是不按教程出结果的一天,这次页面一片空白,右边控制台报错未知符号,像这种时候 我们应该知道 这是文件类型不对 看看内容

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

为什么会是html文件呢,查阅了一些资料以后,产生了一个猜想: js的路径出了问题,然后 try_files uri/ /index.html; 将路径重指向index.html,于是就变成了我们看到的请求js文件 却返回了html的内容。看一下Network的请求路径:

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

很好 路径是错的,猜想初步正确,原因嘛居然是路径中参杂了子路由(insService)的路径,为什么会这样呢 我们打开index.html 看到了js的路径:

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

偶吼,居然是个相对路径。那么很明显问题是在子路由下按照相对路径请求js文件,由于子路由的路径在电脑的物理路径中是不存在的,所以nginx将这个js的404重新指向index 于是就出现了前面的控制台报错 Unexpected token <(这里可以脑补柯南解谜的BGM), 当然这只是猜想,那我们现在就尝试解决看看 办法嘛就是把打包完的js路径改为绝对路径。

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

然后打包

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

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

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


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Compilers

Compilers

Alfred V. Aho、Monica S. Lam、Ravi Sethi、Jeffrey D. Ullman / Addison Wesley / 2006-9-10 / USD 186.80

This book provides the foundation for understanding the theory and pracitce of compilers. Revised and updated, it reflects the current state of compilation. Every chapter has been completely revised ......一起来看看 《Compilers》 这本书的介绍吧!

RGB转16进制工具
RGB转16进制工具

RGB HEX 互转工具

Base64 编码/解码
Base64 编码/解码

Base64 编码/解码

XML、JSON 在线转换
XML、JSON 在线转换

在线XML、JSON转换工具