错误描述:
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. 把Android studio的日志导入目标文件中

    最好是在Android studio的命令行工具中进行命令操作. adb logcat -v time > /Users/z/log.txt adb logcat -v time > /U ...

  2. 测网速 fping Linux查看网络即时网速 linux性能问题(CPU,内存,磁盘I/O,网络)

    Linux查看网络即时网速 fping 是ping 工具的加强版本 例出局域网中存活的主机 (Ubuntu apt-get装上  cnetos装不上) zzx@zzx11:~$ fping -a 19 ...

  3. Tensorflow函数——tf.set_random_seed(seed)

    设置图级随机seed. 依赖于随机seed的操作实际上从两个seed中获取:图级和操作级seed. 这将设置图级别的seed. 其与操作级seed的相互作用如下: 1.如果没有设置图形级别和操作see ...

  4. MVC思想概叙

    随着应用系统的逐渐增大,系统的业务逻辑复杂度是以几何的方式增长,在这种情况下,如果依然把所有的业务逻辑都放在JSP页面中,那将成为一场恶梦. MVC思想将应用中各个组件按照功能来进行分类,不同的组将使 ...

  5. 12 Spring Data JPA:springDataJpa的运行原理以及基本操作(下)

    spring data jpaday1:orm思想和hibernate以及jpa的概述和jpa的基本操作 day2:springdatajpa的运行原理 day2:springdatajpa的基本操作 ...

  6. LUA函数闭包

    词法定界:当一个函数内嵌套另一个函数的时候,内函数可以访问外部函数的局部变量,这种特征叫做词法定界 table.sort(names,functin (n1,n2) return grades[n1] ...

  7. Go-map-字符串-指针-结构体

    Maps 什么是 map ? 类似Python中的字典数据类型,以k:v键值对的形式. map 是在 Go 中将值(value)与键(key)关联的内置类型.通过相应的键可以获取到值. 如何创建 ma ...

  8. Tooltips2

    #include<windows.h> #include<Commctrl.h> #include"resource.h" #pragma comment( ...

  9. 7.docker file 语法

    详细文档 : https://docs.docker.com/engine/reference/builder/ 1. FROM   尽量使用官方的 image 作为 base image FROM ...

  10. SQL Link Oracle

    转自:http://www.2cto.com/database/201107/96105.html 做项目过程中常用到数据库同步,现把前一段时间做的一个项目部分,同步过程贴出来,供分享与自己参考! 本 ...