vue打包完index.html空白,解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题-20210315083204.pdf-原创力文档...

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

V ue项目运行npm run build后会生成一 dist文件夹，我们一般都是把这文件夹部署到服务器上。dist文件夹里边有一 static

文件和一 index .html页面，这 index就是最后单页面的最终文件。

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

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

进入D盘就开始寻找static文件夹当然是找不到的。既然知道了是打包之后寻找文件的地址错误，就去config文件夹下的index .j s

中寻找问题。index .j s中的build命令的配置有一属性叫assetsPublicPath，它的值为‘/'。意思是根目录，这时会从index .html所

在的硬盘的根目录下开始查找，自然无法找到。解决办法：

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

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

我这里请求失败的都是背景图片，而且只是某一些失败。我一直有一疑惑就是为什么同一 css文件中的背景图片请求有的成

功有的失败，要知道我的图片都是放在同一文件夹下边的。目前这疑惑还没有解决。

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

也就是说这 css文件是从当前文件夹下往里寻找static/img/ .png ，要知道static文件夹是在dist根目录下边的，因此，我们需

要修改build 的全局配置，改变css文件的文件请求路径。css文件在static里边的css文件夹中，因此需要先‘ ../ ../'出到dist根目录下

，然后再static/img/ .png ，就可以正确找到对应的图片文件。

解解决决办办法法：：

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

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

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

vue打包完index.html空白,解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题-20210315083204.pdf-原创力文档...相关推荐

每个c语言程序写完后都要按照,c语言基础学习小结(习题总结)（5页）-原创力文档...
书山有路勤为径学海无涯苦作舟一.思考题. 1.你如何向别人解释清楚什么是编程.什么是计算机语言? 2.什么是C语言? 二.解答题. 1.用C语言编写程序:求任意两个整数的和.如果是小数的话,要求输 ...
文档计算机无法分页,同一EXCEL文件在不同计算机上显示分页不同解决办法（6页）-原创力文档...
同一EXCEL文件在不同计算机上显示分页不同解决办法.DOC 同一EXCEL文件在不同计算机上显示分页不同解决办法真正原因 (一)根本原因:电脑的dpi不同. (二)名词解释,dpi(dots pe ...
网络统考计算机实机操作,2020年国家开放大学电大考试《计算机应用基础》网络核心课形考网考作业试题及答案(完整版)（42页）-原创力文档...
(2019秋更新版)国家开放大学电大专科<计算机应用基础>网络核心课形考作业答案(完整版) 100%通过考试说明:2019年春期电大把该课程纳入到"国开平台"进行考核 ...
2009成渝微型计算机处于空白,2020届广州市高三年级调研测试文综地理试题（5页）-原创力文档...
2020 届广州市高三年级调研测试文科综合(地理部分)模拟五一.选择题: 下表为我国四个省市 2009 年. 2018 年微型计算机产量对比表.据此完成 1-3 题. 1．与上海.江苏相比, 20 ...
18大学计算机基础,最新大学计算机基础试题及答案完整版（18页）-原创力文档...
大学计算机基础试题及答案完整版 1 大学计算机基础试题及答案完整版 1 2 2 一 .单选题 3 一 .单选题 3 1.完整的计算机系统由 (C )组成. 4 1.完整的计算机系统由 (C )组成. ...
登录用友时显示不能建立跟服务器的连接,用友GRPR9乡财县管管理软件登录时提示“无法与中间层服务器建立连接,请重新设置中间层”的解决办法知识课件（11页）-原创力文档...
用友GRP_R9乡财县管管理软件登录时提示"无法与中间层服务器建立连接,请重新设置中间层"的解决办法; 当登录用友GRP_R9乡财县管管理软件出现如下提示,请按以下所述解决: (1 ...
计算机组成原理数据冒险的解决nop,计算机组成原理实验讲义（103页）-原创力文档...
计算机组成原理实验讲义南京大学计算机科学与技术系张泽生 2009 年 6 月计算机组成原理实验教程目录第一章集成电路发展与 CPU 设计 1 1.1 集成电路的发展 1 1.1.1 标准 ...
linux操作系统项目化教程课后答案,完整版Linux操作系统及应用项目教程习题答案（13页）-原创力文档...
-Linux版><系统管理.网络编程与服务器搭建课后习题答案 1.8 练习题一.填空题1. GNU's Not Unix的递归缩写 2. 内核(kernel).命令解释层(Shell或 ...
计算机专业考计量经济学,计量经济学期末考试题库(完整版)及答案()（47页）-原创力文档...
计量经济学题库计量经济学题库 1.计量经济学是以经济理论为指导 ,以数据事实为依据 ,以数学统计为方法.以计算机技 1.计量经济学是以经济理论为指导 ,以数据事 ...

vue打包完index.html空白,解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题-20210315083204.pdf-原创力文档...

vue打包完index.html空白,解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题-20210315083204.pdf-原创力文档...相关推荐

最新文章

热门文章