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 '#' 这个错误我是在打包 ...
随机推荐
- Standard Aras Dialogs
In a another blog post, we covered how to open dialogs within Aras Innovator using custom forms and ...
- 设置Apache(httpd)和Nginx 开机自启动
方法1: 进入目录: vi /etc/rc.d/rc.local #设置apache 和 nginx 开机自启动/usr/sbin/apachectl start/usr/sbin/nginx s ...
- 2016蓝桥杯省赛C/C++A组第三题 方格填数
题意:如下的10个格子 填入0~9的数字.要求:连续的两个数字不能相邻. (左右.上下.对角都算相邻) 一共有多少种可能的填数方案? 分析:dfs,划定边界,行1~4,列1~3,初始化为INT_IN ...
- POJ 3258:River Hopscotch 二分的好想法
River Hopscotch Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 9326 Accepted: 4016 D ...
- 线上环境 分析java问题 常见命令
在生产上进程需要分析jvm运行情况,今天分享几个自己常用的命令,持续更新,欢迎补充 1.jps jstack -l {pid} > jstack.log #查看线程快照信息 2.jps jmap ...
- Spring的配置文件说明
<?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.sp ...
- DOM,windows 对象
DOM:文档对象模型 --树模型文档:标签文档,对象:文档中每个元素对象,模型:抽象化的东西 windows 对象:浏览器窗口信息document对象:浏览器显示的页面文件 一:window: win ...
- 7. react 基础 - React Developer Tools 的安装 及 使用
1. 安装 react 开发调试工具 React Developer Tools 打开 chrome 浏览器访问 chrome://extensions/ 点击右上角的 拓展程序 -> 打开 c ...
- 大数据攻城狮之进阶技能-使用Git上传自己的项目至GitHub仓库
在开始讲解之前我们默认已经存在仓库和安装Git,没有下载的可以去https://git-scm.com/ Git官方网站下载或者是私聊博主. 下面我们说一说Git的使用,比如说如何生成密钥,连接远程仓 ...
- CTF -bugku-web-web基础$_GET和$_POST
---恢复内容开始--- GET那题 就算没有学过php也会看懂if条件语句 于是我们在url后面直接加 ?what = flag 这样echo输出flag POST那题 直接火狐 要装hackbar ...