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属性,导致省略号并没有按预期展示: 解决方法 ...
随机推荐
- 把Android studio的日志导入目标文件中
最好是在Android studio的命令行工具中进行命令操作. adb logcat -v time > /Users/z/log.txt adb logcat -v time > /U ...
- 测网速 fping Linux查看网络即时网速 linux性能问题(CPU,内存,磁盘I/O,网络)
Linux查看网络即时网速 fping 是ping 工具的加强版本 例出局域网中存活的主机 (Ubuntu apt-get装上 cnetos装不上) zzx@zzx11:~$ fping -a 19 ...
- Tensorflow函数——tf.set_random_seed(seed)
设置图级随机seed. 依赖于随机seed的操作实际上从两个seed中获取:图级和操作级seed. 这将设置图级别的seed. 其与操作级seed的相互作用如下: 1.如果没有设置图形级别和操作see ...
- MVC思想概叙
随着应用系统的逐渐增大,系统的业务逻辑复杂度是以几何的方式增长,在这种情况下,如果依然把所有的业务逻辑都放在JSP页面中,那将成为一场恶梦. MVC思想将应用中各个组件按照功能来进行分类,不同的组将使 ...
- 12 Spring Data JPA:springDataJpa的运行原理以及基本操作(下)
spring data jpaday1:orm思想和hibernate以及jpa的概述和jpa的基本操作 day2:springdatajpa的运行原理 day2:springdatajpa的基本操作 ...
- LUA函数闭包
词法定界:当一个函数内嵌套另一个函数的时候,内函数可以访问外部函数的局部变量,这种特征叫做词法定界 table.sort(names,functin (n1,n2) return grades[n1] ...
- Go-map-字符串-指针-结构体
Maps 什么是 map ? 类似Python中的字典数据类型,以k:v键值对的形式. map 是在 Go 中将值(value)与键(key)关联的内置类型.通过相应的键可以获取到值. 如何创建 ma ...
- Tooltips2
#include<windows.h> #include<Commctrl.h> #include"resource.h" #pragma comment( ...
- 7.docker file 语法
详细文档 : https://docs.docker.com/engine/reference/builder/ 1. FROM 尽量使用官方的 image 作为 base image FROM ...
- SQL Link Oracle
转自:http://www.2cto.com/database/201107/96105.html 做项目过程中常用到数据库同步,现把前一段时间做的一个项目部分,同步过程贴出来,供分享与自己参考! 本 ...