如何解决vue项目打包之后出现空白页

 时间:2024-10-14 00:06:45

1、用浏览器打开html文件,很糟糕出现了空白页

如何解决vue项目打包之后出现空白页

2、然后我们查看控制台报错信息,我们知道是html页并没有成功引入打包后的项目文件

如何解决vue项目打包之后出现空白页

3、然后我们打开html文件,并对代码进行整理,修改引入文件的路径为“./stat坡纠课柩ic”,然后再用浏览器打开HTML文件就可以查看到内容了,说明我们打包的路径是有问题的

如何解决vue项目打包之后出现空白页如何解决vue项目打包之后出现空白页

4、原因是打包的过程中直接将static直接作为了直接路径下面打开如下图所示的js文件,并修改assetsPublicPath的值为assetsPublicPath: './'。

如何解决vue项目打包之后出现空白页

5、或者修改下图文件,在output中添加publicPath:'./',

如何解决vue项目打包之后出现空白页

6、这回在打开HTML文件就可以看到内容了,但是又发现一个问题,背景图片并没有正常显示出来

如何解决vue项目打包之后出现空白页

7、我们依然查看控制台,可以看到控制台的路径是不对的

如何解决vue项目打包之后出现空白页

8、打开如下图所示的文件,在空框位置处添加publicPath:'../../'

如何解决vue项目打包之后出现空白页

9、重新查看HTML页面就都显示出来了,我们修改成功了。

如何解决vue项目打包之后出现空白页
  • css如何设置底部边框的宽度
  • ppt2016中如何删除文档属性和个人信息
  • 如何对小说章节名进行查找和替换。
  • PPT的情节提要如何导入形状
  • 怎么更正WPS因意外使用大写锁定键而产生的错误
  • 热门搜索
    消防安全手抄报资料 健康成长手抄报内容 关于读书的手抄报资料 清明节手抄报内容资料 平安校园手抄报图片 反邪教手抄报图片大全 缅怀先烈手抄报资料 英语中秋节手抄报 a4手抄报版面设计图 金秋十月手抄报