老师, 项目打包后在dist文件夹下直接打开index.html,所有小图标都不显示了

来源:1-1 如何进行真机调试

L_Tomato

2022-03-28 15:27:44

相关截图:

https://img.mukewang.com/climg/6241632709b647e904700822.jpg

尝试过的解决方式:

https://img.mukewang.com/climg/6241634c0936efa407650709.jpg只能通过这种方式才能正常显示吗

写回答

1回答

好帮手慕慕子

2022-03-28

同学你好,对于你的问题解答如下:

1、 一般打包后项目都是部署到服务器上的,所以推荐通过本地服务器访问打包后的项目。

2、直接打开index.html文件,无法显示小图标,原因如下:

可以查看dist/css/app.css文件中,引入字体文件的代码

https://img.mukewang.com/climg/62416823098576c410620866.jpg

其中url地址以//开头,要求以http或者以https协议加载该url,如果是直接打开index.html,默认以file协议加载该url,导致找不到对应的字体文件,所以无法加载图标,如下:

https://img.mukewang.com/climg/6241693a09c22c2215080838.jpg

批复文档中老师只是提供一种解决方式,还有两种,可以参考如下:

(1)手动修改打包后,引入字体文件的地址,如下:

https://img.mukewang.com/climg/624169a40987f7f409090367.jpg

(2)手动修改打包前style/iconfont.css文件中引入字体文件的地址,如下:

https://img.mukewang.com/climg/624169e0096cfd7910170470.jpg

重新打包,然后就可以直接打开index.html文件了

祝学习愉快~

0

0 学习 · 17877 问题

查看课程