错误描述:
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. POJ 1141 经典DP 轨迹打印

    又几天没写博客了,大二的生活实在好忙碌啊,开了五门专业课,每周都是实验啊实验啊实验啊....我说要本月刷够60题,但好像完不成了,也就每天1题的样子.如今写动规还是挺有条理的,包括这道需要打印轨迹,其 ...

  2. UML-设计模式-本地服务容错-适配器+工厂模式

    问题1:我们的ProductCatalog存储在了数据库里了,但是数据库瘫掉了,怎么办? 解决:本地(Map)---->Local(文件)---->DB 问题2:如果新加了存储Produc ...

  3. 2020/1/29 PHP代码审计之进一步学习XSS【持续更新】

    0x00 上午学习了XSS漏洞,中午吃饭想了想,还是思考的太浅层了,这种老生常谈的东西对于现在的我意义不大.现在我需要的是思考.于是就有了这个随笔.在本文中,我会持续更新一些XSS的深入思考,payl ...

  4. MAVEN报错Could not get the value for parameter compilerId for

    Maven:Could not get the value for parameter compilerId for plugin execution default-compile..... 前两天 ...

  5. 计算机网络(4): socket select使用:聊天室模版

    知识点: 如上所示,用户首先将需要进行IO操作的socket添加到select中,然后阻塞等待select系统调用返回.当数据到达时,socket被激活,select函数返回.用户线程正式发起read ...

  6. php 随机useragent

    <?php /** * 获取随机useragent */ private function get_rand_useragent($param) { $arr = array( 'Mozilla ...

  7. Redis5新特性Streams作消息队列

    前言 Redis 5 新特性中,Streams 数据结构的引入,可以说它是在本次迭代中最大特性.它使本次 5.x 版本迭代中,Redis 作为消息队列使用时,得到更完善,更强大的原生支持,其中尤为明显 ...

  8. 69)stack和queue操作

    操作和vector类似  直接看 vector就行了 或者看笔记  C++进阶课程讲义

  9. D. Minimax Problem(二分+二进制)

    D. Minimax Problem time limit per test 5 seconds memory limit per test 512 megabytes input standard ...

  10. PAT Basic 1023 组个最⼩数 (20) [贪⼼算法]

    题目 给定数字0-9各若⼲个.你可以以任意顺序排列这些数字,但必须全部使⽤.⽬标是使得最后得到的数尽可能⼩(注意0不能做⾸位).例如:给定两个0,两个1,三个5,⼀个8,我们得到的最⼩的数就是1001 ...