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属性,导致省略号并没有按预期展示: 解决方法 ...
随机推荐
- Codeforces 997A Convert to Ones(思维)
https://codeforces.com/problemset/problem/997/A 题目大意: 给定一串0-1序列,定义两种操作: 操作一:选取一连续串倒置. 操作二:选取一连续串把进行0 ...
- 设计模式讲解5:FlyWeight模式源码
声明:迁移自本人CSDN博客https://blog.csdn.net/u013365635 FlyWeight模式即享元模式.很多文本编辑器中都使用了FlyWeight模式.FlyWeight单词含 ...
- maxima画图
八卦 load(draw)$ draw2d( dimensions=[800,800], /*大小*/ ip_grid = [1000,1000], /*光滑一点*/ line_width= 1., ...
- vue表单选项框
选项框选的内容在下面显示 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...
- java RSA 加密解密
package com.rsa; import java.security.KeyFactory; import java.security.KeyPair; import java.security ...
- 0CTF-2016-piapiapia-PHP反序列化长度变化尾部字符串逃逸
0X00 扫描一下网站目录,得到网站源码,这里说下工具使用的是dirmap,亲测御剑不好用... 0x01 审计源码: index.php <?php require_once('class.p ...
- 客户主题分析(tableau)—客户分群
主要分析方面:客户合理分群 客户分群实现:使用聚类构建指标,需理解聚类的分析逻辑,需使用软件:tableau 聚类方法:选择3指标分别为购买总金额,客户购买次数.类平均购买价格(四类的平均购买价格,四 ...
- vzray上网教程
1.首先按照之前的教程在chrome里安装插件-Proxy-SwitchyOmega-Chromium-2.5.15 2.打开 vzray-v3.11-windows-64,打开 3.在chrome ...
- 业内首发 | 区块链数据服务 - BDS
区块链数据服务(Blockchain Data Service,BDS)是京东云区块链产品部发推出的,其将区块链的链式.非结构化数据通过技术手段进行结构化存储,实时同步到高性能数据仓库中. 用户可以通 ...
- 微信支付第三方sdk使用
1.引入依赖:(对于依赖冲突自行解决) <dependency> <groupId>com.github.binarywang</groupId> <arti ...