解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题


Posted in Javascript onOctober 25, 2019

Vue项目运行npm run build后会生成一个dist文件夹,我们一般都是把这个文件夹部署到服务器上。dist文件夹里边有一个static文件和一个index.html页面,这个index就是最后单页面的最终文件。

问题一:我在打包完成后,打开index.html文件发现地址并没有携带路由。

解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题

这样的话页面就是空白了,因为没有组件被添加到页面中。打开F12会看到一堆的红色failed请求。打开请求地址是这样的。

解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题

进入D盘就开始寻找static文件夹当然是找不到的。既然知道了是打包之后寻找文件的地址错误,就去config文件夹下的index.js中寻找问题。index.js中的build命令的配置有一个属性叫assetsPublicPath,它的值为‘/'。意思是根目录,这时会从index.html所在的硬盘的根目录下开始查找,自然无法找到。解决办法:

解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题

改为‘./'这时就不再是绝对路径的根目录了,而是改为了相对路径,同目录下进行查找。再次打包,页面基本正常。

问题二:我再次打包后,页面可以正常打开。但是页面上的一些图片请求失败。

我这里请求失败的都是背景图片,而且只是某一些失败。我一直有一个疑惑就是为什么同一个css文件中的背景图片请求有的成功有的失败,要知道我的图片都是放在同一个文件夹下边的。目前这个疑惑还没有解决。

打开某一个失败的请求,我们会发现请求的路径是这样的。

解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题

也就是说这个css文件是从当前文件夹下往里寻找static/img/XXX.png,要知道static文件夹是在dist根目录下边的,因此,我们需要修改build的全局配置,改变css文件的文件请求路径。css文件在static里边的css文件夹中,因此需要先‘../../'出到dist根目录下,然后再static/img/XXX.png,就可以正确找到对应的图片文件。

解决办法:

修改build文件夹下边的utils.js文件。

解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题

再文件相同的if语句下添加下图中选中的代码。

解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题

重新打包,即可解决图片找不到的问题。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
ie 调试javascript的工具
Apr 29 Javascript
Jquery Validation插件防止重复提交表单的解决方法
Mar 05 Javascript
Javascript获取HTML静态页面参数传递值示例
Aug 18 Javascript
Jquery节点遍历next与nextAll方法使用示例
Jul 22 Javascript
jquery实现像栅栏一样左右滑出式二级菜单效果代码
Aug 24 Javascript
使用JS中的exec()方法构造正则表达式验证
Aug 01 Javascript
web前端vue之vuex单独一文件使用方式实例详解
Jan 11 Javascript
基于cropper.js封装vue实现在线图片裁剪组件功能
Mar 01 Javascript
vue + any-touch实现一个iscroll 实现拖拽和滑动动画效果
Apr 08 Javascript
jquery3和layui冲突导致使用layui.layer.full弹出全屏iframe窗口时高度152px问题
May 12 jQuery
vue使用混入定义全局变量、函数、筛选器的实例代码
Jul 29 Javascript
微信小程序音乐播放器开发
Nov 20 Javascript
Vue el-autocomplete远程搜索下拉框并实现自动填充功能(推荐)
Oct 25 #Javascript
基于Vue el-autocomplete 实现类似百度搜索框功能
Oct 25 #Javascript
vue实现评论列表功能
Oct 25 #Javascript
vue中使用element ui的弹窗与echarts之间的问题详解
Oct 25 #Javascript
浅谈layui 表单元素的选中问题
Oct 25 #Javascript
layUI的验证码功能及校验实例
Oct 25 #Javascript
layui点击按钮页面会自动刷新的解决方案
Oct 25 #Javascript
You might like
论建造顺序的重要性
2020/03/04 星际争霸
基于php实现长连接的方法与注意事项的问题
2013/05/10 PHP
php计算整个目录大小的方法
2015/06/19 PHP
PHP调用API接口实现天气查询功能的示例
2017/09/21 PHP
PHP快速排序算法实现的原理及代码详解
2019/04/03 PHP
PHP解密支付宝小程序的加密数据、手机号的示例代码
2021/02/26 PHP
javascript之更有效率的字符串替换
2008/08/02 Javascript
arguments对象验证函数的参数是否合法
2015/06/26 Javascript
基于jQuery实现的菜单切换效果
2015/10/16 Javascript
JS控制层作圆周运动的方法
2016/06/20 Javascript
初识简单却不失优雅的Vue.js
2016/09/12 Javascript
jQuery 循环遍历改变a标签的href(实例讲解)
2017/07/12 jQuery
ES6 javascript的异步操作实例详解
2017/10/30 Javascript
轻松搞定jQuery+JSONP跨域请求的解决方案
2018/03/06 jQuery
使用vue2实现购物车和地址选配功能
2018/03/29 Javascript
H5+C3+JS实现五子棋游戏(AI篇)
2020/05/28 Javascript
详解VUE里子组件如何获取父组件动态变化的值
2018/12/26 Javascript
JavaScript实现连连看连线算法
2019/01/05 Javascript
使用layui定义一个模块并使用的例子
2019/09/14 Javascript
原生JS无缝滑动轮播图
2019/10/22 Javascript
vue 组件内获取actions的response方式
2019/11/08 Javascript
Python获取远程文件大小的函数代码分享
2014/05/13 Python
对python3 urllib包与http包的使用详解
2018/05/10 Python
python hook监听事件详解
2018/10/25 Python
使用Python和Scribus创建一个RGB立方体的方法
2019/07/17 Python
你还在@微信官方?聊聊Python生成你想要的微信头像
2019/09/25 Python
浅谈django框架集成swagger以及自定义参数问题
2020/07/07 Python
css3 矩阵的使用详解
2018/03/20 HTML / CSS
JD Sports荷兰:英国领先的运动时尚零售商
2020/03/13 全球购物
销售总经理岗位职责
2014/03/15 职场文书
党代会心得体会
2014/09/04 职场文书
2015年保安个人工作总结
2015/04/02 职场文书
调解书格式范本
2015/05/20 职场文书
重温经典:乔布斯在斯坦福大学的毕业演讲(双语)
2019/08/26 职场文书
Vue中插槽slot的使用方法与应用场景详析
2021/06/08 Vue.js
python库Tsmoothie模块数据平滑化异常点抓取
2022/06/10 Python