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 While 循环基础教程
Apr 05 Javascript
Jquery阻止事件冒泡 event.stopPropagation
Dec 11 Javascript
js固定DIV高度,超出部分自动添加滚动条的简单方法
Jul 10 Javascript
JavaScript中对象属性的添加和删除示例
May 12 Javascript
jquery选择器需要注意的问题
Nov 26 Javascript
Javascript中拼接大量字符串的方法
Feb 05 Javascript
JS获取Table中td值的方法
Mar 19 Javascript
对象不支持indexOf属性或方法的解决方法(必看)
May 28 Javascript
vue2实现可复用的轮播图carousel组件详解
Nov 27 Javascript
修改node.js默认的npm安装目录实例
May 15 Javascript
解决vue A对象赋值给B对象,修改B属性会影响到A的问题
Sep 25 Javascript
Vue批量图片显示时遇到的路径被解析问题
Mar 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 Static关键字实用方法
2010/06/04 PHP
PHP解析html类库simple_html_dom的转码bug
2014/05/22 PHP
Yii使用技巧大汇总
2015/12/29 PHP
php 实现一个字符串加密解密的函数实例代码
2016/11/01 PHP
如何离线执行php任务
2017/02/21 PHP
PHP实现将几张照片拼接到一起的合成图片功能【便于整体打印输出】
2017/11/14 PHP
php模式设计之观察者模式应用实例分析
2019/09/25 PHP
javascript showModalDialog 多层模态窗口实现页面提交及刷新的代码
2009/11/28 Javascript
如何确保JavaScript的执行顺序 之jQuery.html深度分析
2011/03/03 Javascript
推荐10个超棒的jQuery工具提示插件
2011/10/11 Javascript
JavaScript实现通过select标签跳转网页的方法
2016/09/29 Javascript
Vue.js 60分钟快速入门教程
2017/03/28 Javascript
React如何避免重渲染
2018/04/10 Javascript
js实现图片上传并预览功能
2018/08/06 Javascript
详解Vue2 添加对scss的支持
2019/01/02 Javascript
详解vue中router-link标签所必备了解的属性
2019/04/15 Javascript
Angular 中使用 FineReport不显示报表直接打印预览
2019/08/21 Javascript
[01:10:58]Spirit vs NB Supermajor小组赛 A组败者组决赛 BO3 第二场 6.2
2018/06/03 DOTA
python中随机函数random用法实例
2015/04/30 Python
Python数据结构与算法之常见的分配排序法示例【桶排序与基数排序】
2017/12/15 Python
Python中函数参数调用方式分析
2018/08/09 Python
python解析含有重复key的json方法
2019/01/22 Python
django基于restframework的CBV封装详解
2019/08/08 Python
python中Lambda表达式详解
2019/11/20 Python
Pytorch实验常用代码段汇总
2020/11/19 Python
世界上最大的家庭自动化公司:Smarthome
2017/12/20 全球购物
EMPHASIS艾斐诗官网:周生生旗下原创精品珠宝品牌
2020/12/17 全球购物
技校毕业生的自我评价
2013/12/27 职场文书
办公室经理岗位职责
2014/01/01 职场文书
十八大感想感言
2014/02/10 职场文书
餐厅采购员岗位职责
2014/03/06 职场文书
道德之星事迹材料
2014/05/03 职场文书
鸟的天堂导游词
2015/01/31 职场文书
幼儿园见习总结
2015/06/23 职场文书
CAD实训总结范文
2015/08/03 职场文书
logback 实现给变量指定默认值
2021/08/30 Java/Android