自己搭建的Vue项目,没有使用vue-cli,引入elementUI时,使用的是webpack直接打包工具,发现字体图标丢失你

记录一下解决办法:

webpack module配置:(build目录下webpack.base.conf.js文件)

{
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文件)

    if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader',
publicPath: '../../'
})
} else {
return ['vue-style-loader'].concat(loaders)
}

只是加了  publicPath: '../../'

然后打包字体图片就可以显示了

vue项目打包部署elementUI的字体图标丢失问题的更多相关文章

  1. 【转】vue项目打包部署——nginx代理访问

    我又来了,今天部署了下vue项目,使用nginx做了代理,这样可以解决跨域的问题,这里做一个简单讲解. 1.先看vue项目打包(我这里使用的是vscode开发工具) 这里是我的项目结构: 打包之前需要 ...

  2. vue项目 打包部署上线

    1. npm run dev:本地开发的时候做调试用的. 2. npm run build:打包部署上线,生成一个 dist 文件夹. 注意:用 npm run build 时,常遇到因引用路径不对导 ...

  3. Vue项目打包部署到apache服务器

    vue项目在开发环境下,让项目运行起来,是通过npm run dev命令,原理是在本地搭建了一个express服务器. 但是在服务器上就不是这样的,必须要通npm run build命令来对整个项目进 ...

  4. vue项目打包 部署nginx服务器 访问远程接口 本地json 跨域问题

    本文建立在你已经在windows7上已经配好了nginx的前提下进行!!! 如果没有请移步至:https://www.cnblogs.com/jack1208-rose0203/p/5739765.h ...

  5. vue项目打包部署到服务器,静态资源文件404

    js文件404问题        原因:打包的项目静态资源的路径需要设置为绝对路径.如果是相对路径会出错 解决办法:修改config/index.js文件,将 assetsPublicPath修改为' ...

  6. vue项目打包部署到nginx 服务器上

    假如要实现的效果如下 http://ip/vue    =>是进入首页访问的路径是  usr/local/nginx/html/vue http://ip/website     =>是进 ...

  7. vue-cli创建的项目打包成app引入字体图标的问题

    将项目在手机端调试时,发现引入的阿里图标显示不出来,需要在引入的iconfont.css文件夹里给url加上https

  8. Vue+elementUI build打包部署后字体图标丢失问题

    错误描述:Vue+elementUI  build打包部署后字体图标丢失,控制台显示文件element-icons.woff和element-icons.ttf文件404 错误展现: 控制台报错截图 ...

  9. vue项目打包采坑

    1. vue项目打包采坑 1.1. vue运行报错error:Cannot assign to read only property 'exports' of object '#' 这个错误我是在打包 ...

随机推荐

  1. 转:JS高级学习笔记(8)- JavaScript执行上下文和执行栈

    必看参考: 请移步:博客园 JavaScript的执行上下文 深入理解JavaScript执行上下文和执行栈 JavaScript 深入之执行上下文 写在开头 入坑前端已经 13 个月了,不能再称自己 ...

  2. Session.Abandon与Session.Clear之间的区别

    Session.Clear()就是把Session对象中的所有项目都删除了,Session对象里面什么都没有.但是Session对象还保留. Session.Abandon()就是把当前Session ...

  3. 自己整理的常用SQL Server 2005 语句、

    --创建数据库 create database 数据库 go --打开数据库 use 数据库 --删除数据库 drop database 数据库 Go --创建数据表 create table 数据表 ...

  4. Android进阶——Android消息机制之Looper、Handler、MessageQueen

    Android消息机制可以说是我们Android工程师面试题中的必考题,弄懂它的原理是我们避不开的任务,所以长痛不如短痛,花点时间干掉他,废话不多说,开车啦 在安卓开发中,常常会遇到获取数据后更新UI ...

  5. POJ 1942:Paths on a Grid

    Paths on a Grid Time Limit: 1000MS   Memory Limit: 30000K Total Submissions: 22918   Accepted: 5651 ...

  6. ADC分辨率

    转载:http://www.rationmcu.com/elecjc/1874.html 今天给大家简单介绍一下ADC器件的常识. ADC,模数转换器,功能是把模拟电压转换成数字量. 概念听的模糊,说 ...

  7. golang实现单链表

    package main import "fmt" type Object interface{} type Node struct { data Object next *Nod ...

  8. pytorch 数据操作

    数据操作 在深度学习中,我们通常会频繁地对数据进行操作.作为动手学深度学习的基础,本节将介绍如何对内存中的数据进行操作. 在PyTorch中,torch.Tensor是存储和变换数据的主要工具.如果你 ...

  9. ZOJ-1234 UVA-10271 DP

    最近觉得动态规划真的很练脑子,对建模以及思维方法有很大帮助,线段树被卡到有点起不来的感觉 最近仔细思考了一下动态规划的思想,无非是由局部最优解得到全局最优解,由此类推,发现,像最短路和最小生成树其实都 ...

  10. 2020.2.21一些python总结

    #字符串前面加r可以防止字符串转义 \也可以防止字符串转义#三引号可以实现输入多行文本#range(start,end,step)#列表 append添加一个元素到末尾 extend 添加一个素组到末 ...