Vue: 解决打包后element-ui图标字体不显示的问题

最新推荐文章于 2024-09-06 14:57:08 发布

原创最新推荐文章于 2024-09-06 14:57:08 发布 · 1.6k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue

vue 专栏收录该内容

26 篇文章

订阅专栏

本文详细介绍了在Vue项目中如何正确配置样式加载的公共路径，确保样式资源能够被正确引用。通过修改utils.js文件中的extract方法，加入publicPath参数，使项目在打包时能够正确处理样式资源的路径。

在build/utils.js下找到

if (options.extract) {
   return ExtractTextPlugin.extract({
     use: loaders,
     fallback: 'vue-style-loader',
     publicPath: '../../'
   })
 } else {
   return ['vue-style-loader'].concat(loaders)
 }

加上

publicPath: '../../'

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

前端小李

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

[已解决]electron-builder vue 打包后iconfont/element-ui字体图标不显示问题

张小斌

05-27

9583

element-ui字体图标无效是因为文件引用路径错误，将其样式资源作为静态资源打包，就可以解决。

Element-UI字体图标不显示

最新发布

qq_24428851的博客

05-09

566

经过对比发现，用yarn安装依赖后，运行的页面加载的字体文件并不是一个http请求，而是把字体文件打包成了Base64编码的文件直接嵌入到了页面当中，而采用npm搭建的环境，则发起了一个http请求，并指向了错误的地址。这一切还是版本不匹配挖出来的大坑。另一个问题被发现，element-ui的版本问题，npm安装搭建的环境，请求的woff文件和ttf文件，显著变大了，分别为55956B和28200B，而通过yarn搭建的环境请求的对应字体文件只有11040B和6164B，文件大小明显不同，差异巨大。

参与评论您还未登录，请先登录后发表或查看评论

vue+element-ui打包后找不到字体和图标库

Tino's Space

06-20

7156

在build/utils.js下找到 if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, fallback: 'vue-style-loader', publicPath: '../../' }) } else { ...

Vue+elementUI build打包部署后字体图标丢失问题

weixin_30399821的博客

05-28

278

错误描述：Vue+elementUI build打包部署后字体图标丢失，控制台显示文件element-icons.woff和element-icons.ttf文件404 错误展现：控制台报错截图 dom渲染展示解决方法：webpack module配置：(build目录下webpack.base.conf.js) module: { ...

vue打包之后浏览器图标设置直接没有输出，vue打包之后浏览器图标不显示

weixin_43779406的博客

01-15

973

打包之前的部分index.html <!DOCTYPE html> <html lang="zh-CN"> <head> <title>xxxx</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalabl.

vue项目打包后，在浏览器上的标题没有图标了？打包之后丢失ico图标丢失

qq_45067263的博客

07-02

4636

项目场景： vue项目打包后，在浏览器上的标题那里不显示图标，本地显示图标正常：打包之后查看：图标丢失，不显示原因分析：解决方案：原因可能有很多种，一条一条筛： 1.打包后图片有没有在文件夹内 2.然后图片路径要对 3.看看打包之后的文件路径对不对 4.图标可能有延迟需要等一会儿多刷一会儿也许就有了下面看解决方法找到问题所在：先打包测试，然后看打包完之后的文件里面能不能找到ico这个图标，没有的话那就说明路径配置错误那就查看路径配置：看自己的配置文件webpack.prod.

解决Vue前端开发中element-ui字体图标不显示问题

描述中还提到“解决字体图标引入不显示问题”，这暗示在使用element-ui时，开发者可能遇到了与字体图标相关的常见问题，即在使用字体图标时出现不显示的问题。在前端开发中，字体图标是用于美化界面的常用元素，通常...

详解Vue+elementUI build打包部署后字体图标丢失问题

10-15

本文将详细解析Vue项目中使用Element UI时，如何解决打包部署后的字体图标丢失问题。 ### 字体图标丢失的问题描述在Vue项目中，结合Element UI进行开发是常见的情况。Element UI使用了Web字体图标，而这些字体...

vue项目部署到服务器后浏览器标签上的小图标消失不见

别来...无恙*的博客

05-27

3125

背景：最近在开发项目过程中发现一个问题，项目部署到服务器后在浏览器打开，会发现浏览器标签上的小图标消失不见了。百度查找问题，网上给出了许多解决的方案，例如清除浏览器缓存、把图标的相对路径改成绝对路径、不用管，第二天它自己就会出现…，解决方案多种多样，只有你想不到的，没有度娘查不到的。但可能相同的问题有时候相同的方法不一定能解决，上面的方法亲测了一遍对我的项目没有作用，可能问题根本不是出现在这里。问题： vue项目部署到服务器后浏览器标签上的小图标消失不见？解决思路：一开始使用百度进行查找解决方法，

vue 项目引入字体图标报错、不显示等问题

weixin_34007886的博客

09-10

1315

问题：在项目开发时使用字体图标，发现两个问题；1、出现报错：解决方法为：把字体引入方式改为绝对路径2、不报错，但是不显示图标字体，出现方框原因可能有两种：①没在用到的地方引入字体的样式文件②你使用的是后缀名为 .styl 文件①的解决办法是在用到的地方引入字体的样式文件（全局引入的话需要从app.vue里引入）②这个就是我遇到的问题，浪费了我好几分钟！！！解决办法是把font.styl改为f...

Vue elementui字体图标显示问题解决方案

11-19

问题如下在build/utils.js下找到 if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, fallback: 'vue-style-loader', publicPath: '../../' }) } else { return ['vue-style-loader'].concat(loaders) } 加上 publicPath: '../../'　　　　　　　运行项目还是不行，Failed to decode downloaded font:

vue自定义网页标签图标不生效的原因和解决办法

HYEHYEHYE的博客

07-19

7305

正常情况下，自定义网页标签图标我们只需要更换下图中的favicon.ico即可，但是最近做项目遇到直接替换favicon.ico有不生效的问题用.jpg或.png格式制作成.ico图标的网站有很多，这里推荐一个比特虫：https://www.bitbug.net/ 发现问题原因后来发现项目使用了@vue/cli-plugin-pwa插件https://www.npmjs.com/package/@vue/cli-plugin-pwa 打开上面链接后可以看到插件更改了网页标签图标的路径

vue+elementUI项目打包后访问不到资源文件

太阳晒屁股了的博客

08-29

5649

vue+elementUI项目打包后访问不到资源文件一，路由不跳转在项目打包之前在本地的路由跳转都是完美的，打包之后出现了路由无法跳转且报错。将router配置index.js文件中的mode：'history'改为hash const createRouter = () => new Router({ // mode: 'history', // 需要服务端支持 mod...

vue-cli 引用elementUI打包后chunk-vendors文件过大

qq_38102991的博客

11-18

3287

先上打包后的chunk-vendors大小结果图哈：第一步：在vue.config.js 中添加 externals来告诉webpack我们这些第三方库不需要打包，如下图：第二步：在public下的idnex.html头部中加入CDN第三方库引用：第三步：在main.js中删除import 导入的 element-ui 插件：第四步：重新打包查看文件大小？不要着急，彩蛋哟：如果发现没有变化的话，在终端下运行：npm run build 再查看文件大小。希望对同学们有帮助，也同时记录自

vue打包后图标不显示的解决方案

骨子里的偏爱

04-17

1237

配置好之后，npm run build打包后就会自动匹配正确的路径，无需手动修改。

qiankun: 关于ElementUI字体图标加载不出来的问题

qq_43340606的博客

12-04

1595

比如我的子应用部署在a.com/bbb，主应用部署在a.com/aaa，独立访问子应用时，字体文件的路径就是a.com/bbb/static/fonts/XXX.wofff（能找到资源），嵌入主应用后访问的路径就是a.com/aaa/static/fonts/XXX.woff（找不到资源），这个时候就会报404错误。更进一步，如果不提取css到独立文件，那么css都会被打包到js文件中，会导致文件变大。elementUI的样式文件中有字体文件的引用，是以相对路径的形式写在css文件中的，

vue中引入字体无效（记录）

H2659541076的博客

05-24

6822

vue中引入字体无效（记录）

element-ui打包之后图标不显示，woff、ttf加载404

Your_Boy_Tt的博客

09-06

2578

昨天在 vue 项目中编写 element-ui 的树形结构的表格，发现项目中无法生效，定位问题之后发现项目使用的 element-ui 的版本是 2.4.11。这个 BASE_URL 是样式渲染的根目录，通过拼接可以看出来，BASE_URL = ‘/static’，也就是说，在渲染样式的时候，定位到 /static 目录下。有知道的请评论区告诉我）。而在 element-ui-2.15.14 版本下，系统还会加载 font 目录下的两个文件，由于我所在项目配置问题，所以扫描的路径是基于当前路径。

vue2设置浏览器标签页图标不生效

weixin_49454414的博客

04-10

940

这是因为浏览器通常会默认寻找名为。的文件作为标签页图标。