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

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

内容简介:按照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中的#号)

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

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


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

查看所有标签

猜你喜欢:

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

信息简史

信息简史

[美] 詹姆斯·格雷克 / 高博 / 人民邮电出版社 / 2013-10 / 69.00元

人类与信息遭遇的历史由来已久。詹姆斯•格雷克笔下的这段历史出人意料地从非洲的鼓语讲起(第1章)。非洲土著部落在尚未直接跨越到移动电话之前,曾用鼓声来传递讯息,但他们是如何做到的呢?后续章节进而讲述了这段历史上几个影响深远的关键事件,包括文字的发明(第2章)、罗伯特•考德里的第一本英语词典(第3章)、查尔斯•巴贝奇的差分机与爱达•拜伦的程序(第4章)、沙普兄弟的信号塔与摩尔斯电码(第5章)。 ......一起来看看 《信息简史》 这本书的介绍吧!

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

在线进制转换器
在线进制转换器

各进制数互转换器

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具