自己搭建的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. Dijkstra--The Captain

    *传送 给定平面上的n个点,定义(x1,y1)到(x2,y2)的费用为min(|x1-x2|,|y1-y2|),求从1号点走到n号点的最小费用. 先给一段证明:给定三个x值,x1<x2<x ...

  2. 字符,字符串,int之间互相转换

    字符转换成字符串:String str = String.valueOf(ch); 字符转换成int: int a = ch; 字符串转换成字符:char ch = str.charAt(0); 字符 ...

  3. 直播课(1)如何通过数据劫持实现Vue(mvvm)框架

    19.6.28更新: 这篇博客比较完善:将每一部分都分装在单独的js文件中: 剖析Vue原理&实现双向绑定MVVM 半个月前看的直播课,现在才自己敲了一遍,罪过罪过 预览: 思路: 简单实现V ...

  4. Codeforces_449B 最短路+统计

    也是给这个题目跪了一天...时间不多了,也不多讲 首先要用 nlogn的优先队列dijstla来求最短路,n^2的会超时,不过发现SPFA好像也可以过,他的复杂度应该介于NlogN和N^2之间. 然后 ...

  5. id就是方法名,如何调用;批量input怎么获取他们的key值作为参数

    1.很多Dom的时候,一个个写会比较麻烦,我用ID记载他的方法名: 2.很多input,在数据交互的时候一个个获取会比较繁琐,给一个方法,批量获取. <div id="searchSt ...

  6. org.springframework.dao.CannotAcquireLockException异常分析

    错误信息如下: 2017-09-27 16:27:16.153 - [com.ldyun.base.service.impl.BaseRetailOrderServiceImpl] - 新增零售商品订 ...

  7. JavaScript 之 原型及原型链

    对象[回顾] 通过字面量创建对象 //通过字面量创建对象 var obj1 = { name:'Jack', age: 18 } 通过系统自带的构造函数构造对象 // 通过系统自带的构造函数构造对象 ...

  8. Codeforces Round #620 (Div. 2)F2

    题意:给出n,和m表示有n天,m块区域,每块区域都有一定数论的动物数量,k表示可以在这一天中观察[x,max(x+k-1,m)]的区域内的动物,有俩台相机,一台只能在偶数天用,另一台则是在奇数天用,每 ...

  9. MySQL--Centos7下安装5.7.19

    https://dev.mysql.com/doc/refman/5.7/en/binary-installation.html https://segmentfault.com/a/11900000 ...

  10. 永久使用mybase

    (1)关闭程序 (2)找到程序的安装路径:D:\mybase\mybase\nyfedit7pro (3)打开mybase.ini 文件,7以下版本文件名称为nyfedit.ini