vue-cli+webpack项目打包到服务器后,ttf字体找不到的解决操作


Posted in Javascript onAugust 28, 2020

更改 build/utils.js 文件中 ExtractTextPlugin 插件的options 配置:

if (options.extract) {
 return ExtractTextPlugin.extract({
 use: loaders,
 publicPath: '../../',   // 注意配置这一部分,根据目录结构自由调整
 fallback: 'vue-style-loader'
 })
} else {
 return ['vue-style-loader'].concat(loaders)
}

补充知识:webpack打包运行vue项目后找不到.ttf及.woff文件,或者路径报错

webpack.base.config 文件中 ,有的人可能在utils.js中

修改前:

{
 test: /\.css$/,
 use: ExtractTextPlugin.extract({
 use: [‘css-loader?minimize‘, ‘autoprefixer-loader‘],
 fallback: ‘style-loader‘
 })
},
{
 test: /\.less$/,
 use: ExtractTextPlugin.extract({
 use: [‘css-loader?minimize‘,‘autoprefixer-loader‘, ‘less-loader‘],
 fallback: ‘style-loader‘
 }),
},

修改后:

{
 test: /\.css$/,
 use: ExtractTextPlugin.extract({
 use: [‘css-loader?minimize‘, ‘autoprefixer-loader‘],
 publicPath:‘../../‘,
 fallback: ‘style-loader‘
 })
},
{
 test: /\.less$/,
 use: ExtractTextPlugin.extract({
 use: [‘css-loader?minimize‘,‘autoprefixer-loader‘, ‘less-loader‘],
 publicPath:‘../../‘,
 fallback: ‘style-loader‘
 }),
},
{
  test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
  loader: 'url-loader',
  options: {
   limit: 10000,
   name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
  }
}

针对ttf/woff结尾的文件使用url-loader加载的,要寻找到加载样式的loader改变打包路径。

就是再加载css的时候,将publicPath路径更改为“../../”,也根据自己的目录结构自定义。这样打包后的项目才能找到相对应的应用路径,为什么要这样改呢,是因为我们的路径要按照打包后的层级结构去找,不是按原本项目本身,还有一点相对路径有时候找不到,所以才要改成这种绝对路径,在static下再去寻找次。

以上这篇vue-cli+webpack项目打包到服务器后,ttf字体找不到的解决操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript改变position值实现菜单滚动至顶部后固定
Jan 18 Javascript
js 表单提交后按钮变灰的实例代码
Aug 16 Javascript
纯javascript判断查询日期是否为有效日期
Aug 24 Javascript
jQuery的文档处理程序详解
May 10 Javascript
JavaScript对Json的增删改属性详解
Jun 02 Javascript
JS中使用new Date(str)创建时间对象不兼容firefox和ie的解决方法(两种)
Dec 14 Javascript
ionic中列表项增加和删除的实现方法
Jan 22 Javascript
Ajax高级笔记 JavaScript高级程序设计笔记
Jun 22 Javascript
vue数组对象排序的实现代码
Jun 20 Javascript
微信小程序签到功能
Oct 31 Javascript
原生js实现弹幕效果
Nov 29 Javascript
JavaScript实现滑块验证解锁
Jan 07 Javascript
vue select 获取value和lable操作
Aug 28 #Javascript
VSCode 添加自定义注释的方法(附带红色警戒经典注释风格)
Aug 27 #Javascript
js实现弹幕飞机效果
Aug 27 #Javascript
jQuery编写QQ简易聊天框
Aug 27 #jQuery
jQuery实现简单QQ聊天框
Aug 27 #jQuery
js实现前端界面导航栏下拉列表
Aug 27 #Javascript
selenium 反爬虫之跳过淘宝滑块验证功能的实现代码
Aug 27 #Javascript
You might like
微信获取用户地理位置信息的原理与步骤
2015/11/12 PHP
Yii统计不同类型邮箱数量的方法
2016/10/18 PHP
PHP+jQuery实现即点即改功能示例
2019/02/21 PHP
JavaScript中的Document文档对象
2008/01/16 Javascript
关于javascript function对象那些迷惑分析
2011/10/24 Javascript
jquery不会自动回收xmlHttpRequest对象 导致了内存溢出
2012/06/18 Javascript
基于javascript代码检测访问网页的浏览器呈现引擎、平台、Windows操作系统、移动设备和游戏系统
2015/12/03 Javascript
JavaScript必知必会(二) null 和undefined
2016/06/08 Javascript
jQuery 3.0十大新特性最终版发布
2016/07/14 Javascript
Javascript获取某个月的天数
2018/05/30 Javascript
Vue前后端不同端口的实现方法
2018/09/19 Javascript
小程序云开发部署攻略(图文教程)
2018/10/30 Javascript
JavaScript数据结构与算法之二叉树遍历算法详解【先序、中序、后序】
2019/02/21 Javascript
vuejs中父子组件之间通信方法实例详解
2020/01/17 Javascript
VUE table表格动态添加一列数据,新增的这些数据不可以编辑(v-model绑定的数据不能实时更新)
2020/04/03 Javascript
JS 数组和对象的深拷贝操作示例
2020/06/06 Javascript
vue 修改 data 数据问题并实时显示操作
2020/09/07 Javascript
[47:52]DOTA2-DPC中国联赛正赛 iG vs LBZS BO3 第二场 3月4日
2021/03/11 DOTA
python命令行参数sys.argv使用示例
2014/01/28 Python
python实现颜色rgb和hex相互转换的函数
2015/03/19 Python
使用Python操作Elasticsearch数据索引的教程
2015/04/08 Python
浅谈scrapy 的基本命令介绍
2017/06/13 Python
Python qqbot 实现qq机器人的示例代码
2019/07/11 Python
python OpenCV GrabCut使用实例解析
2019/11/11 Python
python判断两个序列的成员是否一样的实例代码
2020/03/01 Python
python实现粒子群算法
2020/10/15 Python
香港时尚女装购物网站:ZAFUL
2017/07/19 全球购物
德国富尔达运动鞋店:43einhalb
2020/12/25 全球购物
春节超市活动方案
2014/08/14 职场文书
2015年少先队活动总结
2015/03/25 职场文书
2015年教师业务工作总结
2015/05/26 职场文书
何时使用Map来代替普通的JS对象
2021/04/29 Javascript
python基于tkinter实现gif录屏功能
2021/05/19 Python
python 中的@运算符使用
2021/05/26 Python
Python的代理类实现,控制访问和修改属性的权限你都了解吗
2022/03/21 Python
MySQL中正则表达式(REGEXP)使用详解
2022/07/07 MySQL