Vue+elementUI build打包部署后字体图标丢失问题
错误描述:
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打包部署后字体图标丢失问题的更多相关文章
- Vue项目build打包部署到Tomcat后,刷新报404错误解决方案
问题描述: 一.更新依赖,并打包项目 cd /root/.jenkins/workspace/v-test;npm installcd /root/.jenkins/workspace/v-test; ...
- vue项目打包部署elementUI的字体图标丢失问题
自己搭建的Vue项目,没有使用vue-cli,引入elementUI时,使用的是webpack直接打包工具,发现字体图标丢失你 记录一下解决办法: webpack module配置:(build目录下 ...
- 解决django配合nginx部署后admin样式丢失
解决django配合nginx部署后admin样式丢失 1. 在项目的settings.py文件里添加以下内容: STATIC_URL = '/static/' STATICFILES_DIRS = ...
- vue iView 打包后 字体图标不显示
问题描述: 今天webpack打包后发现iView 字体图标不显示 解决方案: build/webpack.prod.conf.js 这个文件里面 module: { rules: utils.sty ...
- Vue通过build打包后 打开index.html页面是空白的
最近在build打包vue项目遇到了几个问题,如下: 1.npm run build打包项目之后,我们通常是把dist文件里面被压缩后的static文件跟index.html提交到服务器,但最近发现直 ...
- vue之项目打包部署到服务器
这是今年的第一篇博客.整理一下vue如何从项目打包到部署服务器,给大家做下分享,希望能给大家带来或多或少的帮助,喜欢的大佬们可以给个小赞,如果有问题也可以一起讨论下. 第一步:这是很关键的一步.打开项 ...
- angular-cli ng build 打包完成后 打开文件显示空白
将index.html 里面的<base href="/"> 改为<base href="./"> 前面加一个 点 就好了,然后再次打包 ...
- vue+elementui项目打包后样式变化问题
博主刚刚解决了index.html空白问题,刚打开项目页面又发现了样式出现了大问题,样式与开发版本有很大不同,有些样式没有生效.利用搜索引擎,找到了问题所在以及解决办法:main.js中的引入顺序决定 ...
- -webkit-line-clamp、-webkit-box-orient vue 打包部署后不起作用??
场景分析:实际开发中,文字描述过长,需要两行或三行显示缩略显示: 实现过程: 实现过程遇到的问题:打包到线上后发现并没有-webkit-box-orient属性,导致省略号并没有按预期展示: 解决方法 ...
随机推荐
- 吴裕雄--天生自然 JAVASCRIPT开发学习:HTML DOM 元素 (节点)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- header() 被用来发送自定义的 HTTP 报文
header() 被用来发送自定义的 HTTP 报文.关于HTTP报文的更多信息请参考» HTTP/1.1 specification. 请注意一点header()必须在任何实际输出之前调用,不管是普 ...
- PAT Basic 1070 结绳(25) [排序,贪⼼]
题目 给定⼀段⼀段的绳⼦,你需要把它们串成⼀条绳.每次串连的时候,是把两段绳⼦对折,再如下图所示套接在⼀起.这样得到的绳⼦⼜被当成是另⼀段绳⼦,可以再次对折去跟另⼀段绳⼦串连.每次串 连后,原来两段绳 ...
- 内存管理-ARC
推荐文章:http://blog.csdn.net/primer_programer/article/details/14442899 strong:强指针,指向对象,会持有对象,只有当对象无stro ...
- java8新特性-函数式接口详细讲解及案例
一.函数式接口 1.1 概念 函数式接口在Java中是指:有且仅有一个抽象方法的接口.函数式接口,即适用于函数式编程场景的接口.而Java中的函数式编程体现就是Lambda,所以函数式接口就是可 以适 ...
- SpringBoot2中,怎么生成静态文档
SpringBoot2中,怎么生成静态文档 在实际开发过程中,我们通过swagger就可以生成我们的接口文档,这个文档就可以提供给前端人员开发使用的.但是,有时候,我们需要把我们的接口文档,提供给第三 ...
- drf二次封装response-APIViews视图家族-视图工具集-工具视图-路由组件
视图类传递参数给序列化类 (1).在视图类中实例化 序列化对象时,可以设置context内容. (2).在序列化类中的局部钩子.全局钩子.create.update方法中,都可以用self.conte ...
- 项目部署篇之——下载安装Xftp6,Xshell6
俗话说工欲善其事必先利其器,想要在服务器上部署环境就得先安装操作工具. 我用的是xshell6,和xftp6.下面是下载连接,都是免费版的,不需要破解 xftp6链接:https://pan.baid ...
- HTTP Error 502.5 - Process Failure 解决方案
.netcore 2.1.4的程序部署到IIS后报以下错误: ======================================================= HTTP Error 50 ...
- 深度学习数据集MNIST ImageNet COCO PASCAL VOC介绍
参考文档 深度学习数据集汇总介绍 1. MNIST 深度学习领域的“Hello World!”,入门必备!MNIST是一个手写数字数据库,它有60000个训练样本集和10000个测试样本集,每个样本 ...