错误描述:
Vue+elementUI  build打包部署后字体图标丢失,控制台显示文件element-icons.woff和element-icons.ttf文件404

错误展现:

控制台报错截图

dom渲染展示

解决方法:
webpack module配置:(build目录下webpack.base.conf.js)

module: {
rules: [
...(config.dev.useEslint ? [createLintingRule()] : []),
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
}
]
},
webpack utils.js 修改:(build目录下utils.js)

添加    publicPath: '../../'

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

Vue+elementUI build打包部署后字体图标丢失问题的更多相关文章

  1. Vue项目build打包部署到Tomcat后,刷新报404错误解决方案

    问题描述: 一.更新依赖,并打包项目 cd /root/.jenkins/workspace/v-test;npm installcd /root/.jenkins/workspace/v-test; ...

  2. vue项目打包部署elementUI的字体图标丢失问题

    自己搭建的Vue项目,没有使用vue-cli,引入elementUI时,使用的是webpack直接打包工具,发现字体图标丢失你 记录一下解决办法: webpack module配置:(build目录下 ...

  3. 解决django配合nginx部署后admin样式丢失

    解决django配合nginx部署后admin样式丢失 1.  在项目的settings.py文件里添加以下内容: STATIC_URL = '/static/' STATICFILES_DIRS = ...

  4. vue iView 打包后 字体图标不显示

    问题描述: 今天webpack打包后发现iView 字体图标不显示 解决方案: build/webpack.prod.conf.js 这个文件里面 module: { rules: utils.sty ...

  5. Vue通过build打包后 打开index.html页面是空白的

    最近在build打包vue项目遇到了几个问题,如下: 1.npm run build打包项目之后,我们通常是把dist文件里面被压缩后的static文件跟index.html提交到服务器,但最近发现直 ...

  6. vue之项目打包部署到服务器

    这是今年的第一篇博客.整理一下vue如何从项目打包到部署服务器,给大家做下分享,希望能给大家带来或多或少的帮助,喜欢的大佬们可以给个小赞,如果有问题也可以一起讨论下. 第一步:这是很关键的一步.打开项 ...

  7. angular-cli ng build 打包完成后 打开文件显示空白

    将index.html 里面的<base href="/"> 改为<base href="./"> 前面加一个 点 就好了,然后再次打包 ...

  8. vue+elementui项目打包后样式变化问题

    博主刚刚解决了index.html空白问题,刚打开项目页面又发现了样式出现了大问题,样式与开发版本有很大不同,有些样式没有生效.利用搜索引擎,找到了问题所在以及解决办法:main.js中的引入顺序决定 ...

  9. -webkit-line-clamp、-webkit-box-orient vue 打包部署后不起作用??

    场景分析:实际开发中,文字描述过长,需要两行或三行显示缩略显示: 实现过程: 实现过程遇到的问题:打包到线上后发现并没有-webkit-box-orient属性,导致省略号并没有按预期展示: 解决方法 ...

随机推荐

  1. h5与安卓、ios交互

    1.安卓交互 h5调用安卓方法 window.webview.xxx() 安卓调用h5方法, 方法需要在全局注册 window['showUnreadMsg'] = () => { this.$ ...

  2. 冲刺期末阶段一<公文档案流转管理系统>

    今天下午的四节课要求自己完成公文流转管理系统,并规定时间看个人进程,相对来说我对增删改查掌握的不彻底,对项目的逻辑框架不太熟练,所以我感觉今天的进度有点慢.有待继续学习. 完成进度:1.分步骤先理清整 ...

  3. 系统学习python第二天学习笔记

    1.对day01所学内容的练习 """ 评分规则: A >=90 B >=80 C >=70 D 其他 用户输入成绩,根据成绩的不同显示不同的级别. & ...

  4. Python说文解字_杂谈03

    1. 我们从前面的知识得到,所有的类都要继承自object这个基类(超类),另外我们知道“继承”可以继承类的属性和方法.我们起始通过type创建类的时候,自然而然的也会从ojbect继承他的一些属性和 ...

  5. selenium滚动条应用,爬永远讲不完的故事

    from selenium import webdriver class Lj(object): def __init__(self): self.driver = webdriver.Chrome( ...

  6. FPGA的基本组成单元LUT,以及三种核的概念

    .查找表 LUT就是查找表,对于4输入的LUT而言,实际上就是4位地址位,一位数据位的存储器,能够存储16位数据,所以我们在FPGA设计中可以用LUT组建分布式的RAM. 这样也可以解释我们在设计中为 ...

  7. java学习——内部类(一)

    内部类 把一个类放在另一个类中定义,这个定义在其他内部的类被称为内部类,包含内部类 的类被成为外部类,Java从JDK1.1开始引入了内部类的定义. 内部类的作用: 内部类提供了更好的封装,可以把内部 ...

  8. SSM到Spring Boot-校园商铺平台

    第04章 店铺注册功能模块 4-3 Thumbnailator图片处理和封装Util[通过java代码实现给图片打上水印] 4-3 Thumbnailator图片处理和封装Util[通过java代码实 ...

  9. @ResponseBody与@RestController

    @ResponseBody与@RestController的作用与区别 https://blog.csdn.net/xfl4629712/article/details/78528387

  10. Python常见经典

    python中if __name__ == '__main__': 的解析 当你打开一个.py文件时,经常会在代码的最下面看到if __name__ == '__main__':,现在就来介 绍一下它 ...