解决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 相关文章推荐
window.opener用法和用途实例介绍
Aug 19 Javascript
js利用数组length属性清空和截短数组的小例子
Jan 15 Javascript
推荐9款炫酷的基于jquery的页面特效
Dec 07 Javascript
完美兼容IE,chrome,ff的设为首页、加入收藏及保存到桌面js代码
Dec 17 Javascript
js绘制圆形和矩形的方法
Aug 05 Javascript
基于jquery实现ajax无刷新评论
Aug 19 Javascript
JavaScript中双符号的运算详解
Mar 12 Javascript
Angularjs实现控制器之间通信方式实例总结
Mar 27 Javascript
JS异步执行结果获取的3种解决方式
Feb 19 Javascript
解决layui的form里的元素进行动态生成,验证失效的问题
Sep 14 Javascript
jQuery实现简单评论功能
Aug 19 jQuery
js动态生成表格(节点操作)
Jan 12 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
透析PHP的配置文件php.ini
2006/10/09 PHP
浅析PHP程序设计中的MVC编程思想
2014/07/28 PHP
PHP基于CURL进行POST数据上传实例
2014/11/10 PHP
PHP使用反射机制实现查找类和方法的所在位置
2016/04/22 PHP
mysql_escape_string()函数用法分析
2016/04/25 PHP
prototype class详解
2006/09/07 Javascript
学习YUI.Ext 第六天--关于树TreePanel(Part 2异步获取节点)
2007/03/10 Javascript
原创javascript小游戏实现代码
2010/08/19 Javascript
Jquery的hide及toggle方法让超链接慢慢消失
2013/09/06 Javascript
AngularJS基础知识
2014/12/21 Javascript
原生javascript实现图片按钮切换
2015/01/12 Javascript
js实现刷新iframe的方法汇总
2015/04/27 Javascript
JQuery中ajax方法访问web服务实例
2015/07/18 Javascript
数据分析软件之FineReport教程:[5]参数界面JS(全)
2015/08/13 Javascript
JS常见问题之为什么点击弹出的i总是最后一个
2016/01/05 Javascript
easyui form validate总是返回false的原因及解决方法
2016/11/07 Javascript
bootstrap监听滚动实现头部跟随滚动
2016/11/08 Javascript
JS操作时间 - UNIX时间戳的简单介绍(必看篇)
2017/08/16 Javascript
vue解决弹出蒙层滑动穿透问题的方法
2018/09/22 Javascript
js实现通过开始结束控制的计时器
2019/02/25 Javascript
JS中的防抖与节流及作用详解
2019/04/01 Javascript
javascript实现自由编辑图片代码详解
2019/06/21 Javascript
layui数据表格重载实现往后台传参
2019/11/15 Javascript
关于Node.js中频繁修改代码重启服务器的问题
2020/10/15 Javascript
python中将字典形式的数据循环插入Excel
2018/01/16 Python
Django使用unittest模块进行单元测试过程解析
2019/08/02 Python
Python键鼠操作自动化库PyAutoGUI简介(小结)
2020/05/17 Python
利用python3筛选excel中特定的行(行值满足某个条件/行值属于某个集合)
2020/09/04 Python
python实现图像高斯金字塔的示例代码
2020/12/11 Python
就业推荐自我鉴定
2013/10/06 职场文书
结婚喜宴主持词
2014/03/14 职场文书
电话客服工作职责
2014/07/27 职场文书
车间质检员岗位职责
2015/04/08 职场文书
2015年青年志愿者协会工作总结
2015/04/27 职场文书
建党伟业观后感
2015/06/01 职场文书
只需要100行Python代码就可以实现的贪吃蛇小游戏
2021/05/27 Python