vue项目打包部署elementUI的字体图标丢失问题
自己搭建的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的字体图标丢失问题的更多相关文章
- 【转】vue项目打包部署——nginx代理访问
我又来了,今天部署了下vue项目,使用nginx做了代理,这样可以解决跨域的问题,这里做一个简单讲解. 1.先看vue项目打包(我这里使用的是vscode开发工具) 这里是我的项目结构: 打包之前需要 ...
- vue项目 打包部署上线
1. npm run dev:本地开发的时候做调试用的. 2. npm run build:打包部署上线,生成一个 dist 文件夹. 注意:用 npm run build 时,常遇到因引用路径不对导 ...
- Vue项目打包部署到apache服务器
vue项目在开发环境下,让项目运行起来,是通过npm run dev命令,原理是在本地搭建了一个express服务器. 但是在服务器上就不是这样的,必须要通npm run build命令来对整个项目进 ...
- vue项目打包 部署nginx服务器 访问远程接口 本地json 跨域问题
本文建立在你已经在windows7上已经配好了nginx的前提下进行!!! 如果没有请移步至:https://www.cnblogs.com/jack1208-rose0203/p/5739765.h ...
- vue项目打包部署到服务器,静态资源文件404
js文件404问题 原因:打包的项目静态资源的路径需要设置为绝对路径.如果是相对路径会出错 解决办法:修改config/index.js文件,将 assetsPublicPath修改为' ...
- vue项目打包部署到nginx 服务器上
假如要实现的效果如下 http://ip/vue =>是进入首页访问的路径是 usr/local/nginx/html/vue http://ip/website =>是进 ...
- vue-cli创建的项目打包成app引入字体图标的问题
将项目在手机端调试时,发现引入的阿里图标显示不出来,需要在引入的iconfont.css文件夹里给url加上https
- Vue+elementUI build打包部署后字体图标丢失问题
错误描述:Vue+elementUI build打包部署后字体图标丢失,控制台显示文件element-icons.woff和element-icons.ttf文件404 错误展现: 控制台报错截图 ...
- vue项目打包采坑
1. vue项目打包采坑 1.1. vue运行报错error:Cannot assign to read only property 'exports' of object '#' 这个错误我是在打包 ...
随机推荐
- 吴裕雄--天生自然 JAVASCRIPT开发学习:运算符
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- Excel----考勤表制作自动更新日期
起初效果 1. 我们首先输入年月日,如图 选择日期 按`ctrl+1` 来调出下图: 2. 数据填充 3.设置星期 点击1下面的单元格
- UML-设计模式-缓存策略
继续前一章<本地服务容错> 问题:考虑加载内存ProductCatalog缓存和基于LocalProducts文件缓存的可选方案: 一种是惰性初始化(lazy init):当实际读取外部产 ...
- Neo4j--节点的增删查改基本用法
注 node-name 和 label-name node-name 有点句柄的味道. 从面向对象来理解,label-name相当于一个类,node-name相当于这个类的对象. 类比关系型数据库的 ...
- 主席树的妙用——Just h-index
题目传送门:https://ac.nowcoder.com/acm/contest/1107/C 题意:给出一个区间,求最大的 h ,使得区间内至少有 h 个数 大于等于 h. 思路:1.需要区间有序 ...
- Mysql 3306 被 linux 防火墙拦截
项目测试时需要本地连接linux服务器的mysql, 发现navicat无法连接 原因一:mysql没有添加外部ip的访问权限. 原因二:mysql 的 3306 端口 处于被防火墙的拦截状态. 解决 ...
- Java线程——线程之间的数据共享
在 Java 传统线程机制中的共享数据方式,大致可以简单分两种情况: ➢ 多个线程行为一致,共同操作一个数据源.也就是每个线程执行的代码相同,可以使用同一个 Runnable 对象,这个 Runn ...
- Spark核心算子
Spark RDD: Transformation Meaning map(func) 返回一个新的分布式数据集,该数据集是通过将源的每个元素传递给函数func处理形成的. filter(func) ...
- Linux--shell 计算时间差
参考:https://www.cnblogs.com/leixingzhi7/p/6281675.html starttime=`date +'%Y-%m-%d %H:%M:%S'` #执行程序 en ...
- XCOM串口助手打印不出数据
本次实验是在基于原子的战舰开发板上的做定时器捕获实验,程序源码下载到板子上运行正常.指示灯正常显示,打开XCOM识别不来串口,原因:硬件上没有插USB转串口线: 连接上USB转串口线,软件上以显示CH ...