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 '#' 这个错误我是在打包 ...
随机推荐
- 文献及代码阅读报告 - SS-LSTM:A Hierarchical LSTM Model for Pedestrian Trajectory Prediction
概览 简述 SS-LSTM全称Social-Scene-LSTM,是一种分层的LSTM模型,在已有的考虑相邻路人之间影响的Social-LSTM模型之上额外增加考虑了行人背景的因素.SS-LSTM架构 ...
- 路飞学城—Python爬虫实战密训班 第二章
路飞学城—Python爬虫实战密训班 第二章 一.Selenium基础 Selenium是一个第三方模块,可以完全模拟用户在浏览器上操作(相当于在浏览器上点点点). 1.安装 - pip instal ...
- 吴裕雄--天生自然Django框架开发笔记:Django 表单
HTML表单是网站交互性的经典方式. 用Django对用户提交的表单数据进行处理. HTTP 请求 HTTP协议以"请求-回复"的方式工作.客户发送请求时,可以在请求中附加数据.服 ...
- PAT Advanced 1013 Battle Over Cities (25) [图的遍历,统计连通分量的个数,DFS,BFS,并查集]
题目 It is vitally important to have all the cities connected by highways in a war. If a city is occup ...
- 配置gitlab代码提交之后自动触发jenkins
https://www.cnblogs.com/bugsbunny/p/7919993.html
- 69.ORM查询条件:isnull和regex的使用
首先查看数据库中的article表的数据: 定义模型的文件models.py中的示例代码如下: from django.db import models class Category(models.M ...
- UVALive 3704 细胞自动机 矩阵快速幂
是时候要做做数学类的题目了 这属于比较简单的矩阵快速幂了,因为有个已知的矩阵循环的结论,所以为了节约时空,只需要保留一行即可,这个稍微有点难写,也不是难写,主要是注意细节.其他的矩阵快速幂一下即可 # ...
- 吴裕雄--天生自然MySQL学习笔记:MySQL 连接的使用
使用 MySQL 的 JOIN 在两个或多个表中查询数据. 可以在 SELECT, UPDATE 和 DELETE 语句中使用 Mysql 的 JOIN 来联合多表查询. JOIN 按照功能大致分为如 ...
- java字符串排序(数字,字母,汉字等组合排序)
package cn.cnnho.backstage.utils; import java.util.ArrayList;import java.util.Arrays;import java.uti ...
- PCB布局注意事项
PCB布局注意事项 1.实现统一功能电路模块中的元件应采用就近集中原则,同时数字电路和模拟电路分开; 2.定位孔.标准孔等非安装孔周围1.27mm 内不得贴装元.器件,螺钉等安装孔周围3.5mm( ...