错误描述:
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. [RoarCTF 2019]Easy Calc-协议层攻击之HTTP请求走私

    0X01:什么是HTTP请求走私 HTTP请求走私属于协议层攻击,是服务器漏洞的一种. HTTP请求走私是一种干扰网站处理从一个或多个用户接收的HTTP请求序列的方式的技术.使攻击者可以绕过安全控制, ...

  2. 2019杭电暑假多校训练 第六场 Snowy Smile HDU - 6638

    很多题解都是简单带过,所以打算自己写一篇,顺便也加深自己理解 前置知识:线段树.线段树维护最大字段和.二维坐标离散化 题解: 1.很容易想到我们需要枚举所有子矩阵来得到一个最大子矩阵,所以我们的任务是 ...

  3. .net core编译时设置不自动生成“netcoreapp3.0”目录

    不知道出于什么目的,.netcore项目默认编译时生成的文件要多加一层"netcoreapp3.0"或"netcoreapp2.1",这应该不符合大多数开发者的 ...

  4. jquery时钟

    <script type="text/javascript"> function getDate(){ var mydate = new Date(); //时间对象 ...

  5. UML-逻辑架构和包图-概述

    回顾前几章学习了用例模型,本章开始学习设计模型.

  6. c#学习笔记01——引用&类

    数据类型 值类型 bool 布尔值 True 或 False False byte 8 位无符号整数 0 到 255 0 char 16 位 Unicode 字符 U +0000 到 U +ffff ...

  7. NOIP复赛文件路径怎么写

    以2018年NOIP普及组复赛为例,四道题对应着四个文件夹:   随便选一道题,比如第一道题,进入title目录,可以看到title1.in, title1.ans, title2.in, title ...

  8. 将List 分成n个长度由调用者指定的子List

    public static void main(String[] args) { List<Integer> list = Arrays.asList(1,2,3,4,5,6,7,8); ...

  9. MCMC学习

    看了这个文档 结合随机矩阵的知识, 更清楚了一点. https://www.cnblogs.com/xbinworld/p/4266146.html

  10. 17.3.13--pycharm2和3的常识问题

    1------pycharm 3~支持print(),不支持那个 print+一个空格的形式 pycharm2~~支持print+一个空格,,也支持那个print()形式 虽然print语法是Pyth ...