1、问题描述

最近因为项目的原因开始学习vue,看了几天教程然后开始撸项目。撸的过程也挺顺利,撸了一个多月项目要上线的时候却出现了问题——用history模式打开网站的时候,从导航点到具体的内容页是正常的,但是一刷新内容页就空白了。

比如:打开网站首页是正常的 http://localhost:8888/ 刷新也没问题。

通过鼠标点击,从导航栏进入商家详情页的某个项目也是正常的 http://localhost:8888/Business/ResetBusiness 但是刷新下页面就空白了。控制台报错如下。

点进去错误查看,app.js中竟然都是html代码

怎么会这样子,html怎么会被打包到了js中。为此我查了好久,感觉是打包工具出了问题,但是vue-cli的打包工具很复杂,具体是哪里,还真不好找。

后来经大佬提醒,查了下network,发现app.js的请求路径有问题。请求路径如下

这是不对的,app.js的请求路径竟然多了一个Business。而打包后的app.js是在根目录的,如果用相对路径请求的话,肯定是请求不到的。app的正确地址就是应该是这个才对。http://localhost:8888/app.js

2. 找原因

发薪问题,下一步就是开始找原因,由于对vue的不太熟,这个过程真是耗费了很长时间,这中间也请教了很多vue的大佬,然后大佬们也没有找到问题所在。可怕的是他们都没有遇到过这个问题。

找了一两天,终于被我找到原因了。是因为之前被一篇vue教程误导了。这个教程说要修改webpack.base.config.js 中build项的assetsPublicPath 为相对路径

坑爹啊,我想骂楼主的心都有了。那篇教程在这里。https://segmentfault.com/a/1190000009291545

3.解决办法

把assetsPublicPath 改为绝对路径 '/' 就可以了。 就这么简单。

多级路由请求js文件路径不对的解决方法的更多相关文章

  1. Vue Cli 打包之后静态资源路径不对的解决方法

    cli2版本: 将 config/index.js 里的 assetsPublicPath 的值改为 './' . build: { ... assetsPublicPath: './', ... } ...

  2. vite2 打包的时候vendor-xxx.js文件过大的解决方法

    vite2是一个非常好用的工具,只是随着代码的增多,打包的时候 vendor-xxxxxx.js 文件也越来越大,这就郁闷了. 打包时遇到警告 输出文件名字/static/vendor.9b5698e ...

  3. angular 路由请求js文件

    <script type="text/javascript" src="http://apps.bdimg.com/libs/angular.js/1.3.2/an ...

  4. eclipse中的js文件报错的解决办法

    在使用别人的项目的时候,导入到eclipse中发现js文件报错,解决办法是关闭eclipse的js校验功能. 三个步骤: 1. 右键点击项目->properties->Validation ...

  5. JS 无法清除Cookie的解决方法

    JS 无法清除Cookie的解决方法   项目中使用sdmenu.js时,需要在登录时清除Cookie,而sdmenu默认是会保存Cookie的 下面是sdmenu.js保存Cookie的方法 doc ...

  6. ajax跨域POST时执行OPTIONS请求服务端返回403forbidden的解决方法

    ajax访问服务端restful api时,由于contentType类型的原因,浏览器会先发送OPTIONS请求. 本人服务端用的是spring mvc框架,web服务器用的是tomcat的,以下给 ...

  7. JCIFS读取远程服务器文件过慢的解决方法

    JCIFS读取远程服务器文件过慢的解决方法 发表于3年前(2013-07-12 11:23)   阅读(1174) | 评论(0) // 我要收藏"; var favor_del = &qu ...

  8. Log4Net 生成多个文件、文件名累加解决方法

    Log4Net 生成多个文件.文件名累加解决方法 项目中的WCF服务里采用Log4Net用来记录异常日志,但部署后,生成的日志会出现多个累加文件,如下图: WCF是寄宿在IIS上,包含了5个SVC服务 ...

  9. EXCEL词典(xllex.dll)文件丢失或损坏解决方法

    EXCEL词典(xllex.dll)文件丢失或损坏解决方法     1● 问题   2● 解决 fail 3● 方法2   regsvr32 xllex.dll     4● 方法3 启动server ...

随机推荐

  1. poj2182(线段树求序列第k小)

    题目链接:https://vjudge.net/problem/POJ-2182 题意:有n头牛,从1..n编号,乱序排成一列,给出第2..n个牛其前面有多少比它编号小的个数,记为a[i],求该序列的 ...

  2. 第三周博客总结 <西北师范大学| 周安伟>

    一,本周助教小结 工作稳步推进,时间分配合理,点评效率有所提高,主要进行了评分工作,工作情况都汇总到了Excel中. 二,助教本人博客       https://home.cnblogs.com/u ...

  3. Python开发【第十一篇】:Python操作MySQL

    本篇对于Python操作MySQL主要使用两种方式: 1.原生模块pymsql. 2.ORM框架SQLAchemy. pymsql pymsql是Python中操作MySQL的模块,其使用方法和MyS ...

  4. 手机设备上touchstart与click的区别

    1.基本定义 touchstart 手指触碰开始就能触发 click 1.手指触碰 2.手指未在屏幕上移动 3.在这个dom上手指离开屏幕 4.触摸和离开屏幕之间的时间间隔较短 因此,click事件有 ...

  5. Linux-Slabinfo

    1.内存管理有两个算法:伙伴算法(buddy system)和slab算法.伙伴算法是以页为单位管理内存,slab算法是以字节为单位管理内存,是内核的小内存管理算法.特点是基于对象进行管理. slab ...

  6. APP支付(.NET版)

    ---恢复内容开始--- APP支付(.NET版) 一.   支付宝支付 1. 有一个支付账号,在蚂蚁金服开放平台中登录账号→选择“管理中心”→在“开发者中心”下选择“网页&移动应用”→然后按 ...

  7. 常用Linux VPS/服务器SSH连接工具 - Xshell下载与使用

    我们很多网友可能初次接触Linux VPS.服务器,所以在购买完毕VPS主机不知道如何登录.有些网友甚至直接类似WIN系统一样直接在桌面远程连接工具连接,可想而知肯定是无法连接的.因为如果我们购买的是 ...

  8. Numpy用户指南

    Numpy是Python语言的一个扩展库,支持大量的维度数组和矩阵运算,此外也针对数组运算提供大量的数学函数库. Mumpy是一个运行速度非常快的数学库,主要用于数组计算,包涵: 1.一个强大的N维数 ...

  9. 三、PyQt5不同方法创建菜单栏、工具栏和状态栏

    创建菜单栏.工具栏和状态栏可以直接通过代码实现,也可以通过Qt Designer中的属性编辑器等实现.通过两种方法的学习可以加深理解,更好的掌握PyQt5. 一.菜单栏与状态栏 状态栏的设置比较简单, ...

  10. 得到一个文件夹中所有文件的名称的几个方法(命令指示符, C++, python)

    因为最近一直需要获得一个文件下的所有图片的名称,自己又总是跨平台使用,所以把自己在不同环境之下使用的方法总结如下 1.cmd 模式下 优点:简单 例如,我想将一个文件夹下的所有".jpg&q ...