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 相关文章推荐
基于KMP算法JavaScript的实现方法分析
May 03 Javascript
如何从jQuery的ajax请求中删除X-Requested-With
Dec 11 Javascript
javascript在网页中实现读取剪贴板粘贴截图功能
Jun 07 Javascript
JavaScript整除运算函数ceil和floor的区别分析
Apr 14 Javascript
jQuery图片特效插件Revealing实现拉伸放大
Apr 22 Javascript
基于JavaScript实现瀑布流效果(循环渐近)
Jan 27 Javascript
javascript实现简单计算器效果【推荐】
Apr 19 Javascript
深入理解(function(){... })();
Aug 16 Javascript
微信小程序-小说阅读小程序实例(demo)
Jan 12 Javascript
Angularjs单选框相关的示例代码
Aug 17 Javascript
Vue3.0中的monorepo管理模式的实现
Oct 14 Javascript
Postman如何实现参数化执行及断言处理
Jul 28 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
深入解析php之apc
2013/05/15 PHP
php环境下利用session防止页面重复刷新的具体实现
2014/01/09 PHP
PHP INT类型在内存中占字节详解
2019/07/20 PHP
javascript qq右下角滑出窗口 sheyMsg
2010/03/21 Javascript
Javascript倒计时代码
2010/08/12 Javascript
jquery中的查找parents与closest方法之间的区别
2013/12/02 Javascript
jQuery操作CheckBox的方法介绍(选中,取消,取值)
2014/02/04 Javascript
jquery高级编程的最佳实践详解
2014/03/23 Javascript
jquery队列函数用法实例
2014/12/16 Javascript
在JavaScript中操作数组之map()方法的使用
2015/06/09 Javascript
JS表格组件神器bootstrap table详解(强化版)
2016/05/26 Javascript
js严格模式总结(分享)
2016/08/22 Javascript
浅谈Vue.nextTick 的实现方法
2017/10/25 Javascript
对vue 键盘回车事件的实例讲解
2018/08/25 Javascript
vue中如何实现后台管理系统的权限控制的方法示例
2018/09/19 Javascript
vue 页面回退mounted函数不执行的解决方案
2020/07/26 Javascript
[06:45]DOTA2-DPC中国联赛 正赛 Magma vs LBZS 选手采访
2021/03/11 DOTA
Python面向对象编程中关于类和方法的学习笔记
2016/06/30 Python
Python中sort和sorted函数代码解析
2018/01/25 Python
浅谈关于Python3中venv虚拟环境
2018/08/01 Python
Python中的四种交换数值的方法解析
2019/11/18 Python
python3爬虫中多线程的优势总结
2020/11/24 Python
使用CSS3的appearance属性改变元素的外观的方法
2015/12/12 HTML / CSS
具有防紫外线功能的高性能钓鱼服装:Hook&Tackle
2018/08/16 全球购物
申请任职学生会干部自荐书范文
2014/02/13 职场文书
八项规定整改方案
2014/02/21 职场文书
2014年五四青年节演讲比赛方案
2014/04/22 职场文书
公司担保书范文
2014/05/21 职场文书
人事任命书格式
2014/06/05 职场文书
文明寝室标语
2014/06/13 职场文书
优秀会计求职信
2014/07/04 职场文书
英语课外活动总结
2014/08/27 职场文书
2014年卫生保健工作总结
2014/12/08 职场文书
七一表彰大会简报
2015/07/20 职场文书
董事长助理工作总结2015
2015/07/23 职场文书
Android Canvas绘制文字横纵向对齐
2022/06/05 Java/Android