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属性,导致省略号并没有按预期展示: 解决方法 ...
随机推荐
- 使用java(jdbc)向mysql中添加数据时出现“unknown column……”错误
错误情况如题,出现这个错误的原因是这样的: 在数据库中,插入一个字符串数据的时候是需要用单引号引起来的. 而下面的代码,注意看: sta.executeUpdate("INSERT INTO ...
- win10设置开机以及开机无密码验证
1.开机自启动 将程序的exe的快捷方式放入下列文件夹中 C:\ProgramData\Microsoft\Windows\Start Menu\Programs\StartUp 2.开机无登录验证 ...
- 吴裕雄--天生自然 PHP开发学习:表单验证
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title> ...
- PAT Advanced 1020 Tree Traversals (25) [⼆叉树的遍历,后序中序转层序]
题目 Suppose that all the keys in a binary tree are distinct positive integers. Given the postorder an ...
- python全局灰度线性变换——自由设定图像灰度范围
全局线性变换的公式是s = (r-a)*(d-c)/(b-a)+c,其中a.b是原图片的灰度最小值和最大值,c.d是变换后的灰度值的最小值和最大值.r是当前像素点的灰度值,s是当前像素点变换后的灰度值 ...
- SVN的import和export的使用
import 上传到服务器 export 下载到本地 import这个命令在使用的时候,都要多加一级目录 比如 目录结构是 E:\\1\\2 在1目录下执行import 只会把2目录提交上去,1的 ...
- Python笔记_第二篇_面向过程_第二部分_4.常用模块的简单使用_import语句的解释
1. import语句.from...import语句.from...import*语句 解释:注意一定要在体同一级目录下 1.1 引入模块 格式:import module[,module2,... ...
- linux 中的.so和.a文件
Linux下的.so是基于Linux下的动态链接,其功能和作用类似与windows下.dll文件. 下面是关于.so的介绍: 一.引言 通常情况下,对函数库的链接是放在编译时期(compile tim ...
- 代码验证ncut和谱聚类的系数
W = rand(30); W = W+W'; I = cell(3,1); I{1} = 1:10; I{2} = 11:20; I{3} = 21:30; vol = -ones(3,1); fo ...
- 讯飞语音的中的bug用户校验失败
用户校验失败:原因是目录没有复制粘贴正确. 下面是刚刚下载的SDK目录: 下面的是自己Android工程中的目录:注意复制粘贴的文件路径要正确