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 相关文章推荐
dojo 之基础篇
Mar 24 Javascript
js模仿windows桌面图标排列算法具体实现(附图)
Jun 16 Javascript
js的Prototype属性解释及常用方法
May 08 Javascript
javascript模拟命名空间
Apr 17 Javascript
微信小程序之网络请求简单封装实例详解
Jun 28 Javascript
原生js调用json方法总结
Feb 22 Javascript
微信小程序文字显示换行问题
Jul 28 Javascript
微信小程序实现吸顶效果
Jan 08 Javascript
javascript设计模式 ? 职责链模式原理与用法实例分析
Apr 16 Javascript
Vue路由的模块自动化与统一加载实现
Jun 05 Javascript
js实现页面导航层级指示效果
Aug 25 Javascript
JS实现简单的九宫格抽奖
Jun 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
zend Framework中的Layout(模块化得布局)详解
2013/06/28 PHP
Windows下Apache + PHP SESSION丢失的解决过程全纪录
2015/04/07 PHP
PHP生成短网址方法汇总
2016/07/12 PHP
THINKPHP在添加数据的时候获取主键id的值方法
2017/04/03 PHP
Yii2 如何在modules中添加验证码的方法
2017/06/19 PHP
Laravel下生成验证码的类
2017/11/15 PHP
jQuery使用手册之三 CSS操作
2007/03/24 Javascript
测试你的JS的掌握程度的代码
2009/12/09 Javascript
自己动手制作jquery插件之自动添加删除行的实现
2011/10/13 Javascript
js实现省市联动效果的简单实例
2014/02/10 Javascript
Node.js模块封装及使用方法
2016/03/06 Javascript
js实现分割上传大文件
2016/03/09 Javascript
利用jquery实现瀑布流3种案例
2016/09/18 Javascript
easyui取消表单实时验证,提交时统一验证的简单实例
2016/11/07 Javascript
JS封装通过className获取元素的函数示例
2016/12/20 Javascript
iscroll实现下拉刷新功能
2017/07/18 Javascript
微信小程序使用swiper组件实现类3D轮播图
2018/08/29 Javascript
Nuxt升级2.0.0时出现的问题(小结)
2018/10/08 Javascript
vue实现鼠标经过动画
2019/10/16 Javascript
python函数参数*args**kwargs用法实例
2013/12/04 Python
Python中使用asyncio 封装文件读写
2016/09/11 Python
python使用writerows写csv文件产生多余空行的处理方法
2019/08/01 Python
Python使用enumerate获取迭代元素下标
2020/02/03 Python
Python日期格式和字符串格式相互转换的方法
2020/02/18 Python
python模拟点击网页按钮实现方法
2020/02/25 Python
python学习将数据写入文件并保存方法
2020/06/07 Python
Pyinstaller加密打包应用的示例代码
2020/06/11 Python
python3 简单实现组合设计模式
2020/07/02 Python
python定时截屏实现
2020/11/02 Python
汇集了世界上最好的天然和有机美容产品:LoveLula
2018/02/05 全球购物
Nike比利时官网:Nike.com (BE)
2019/02/07 全球购物
C++:memset ,memcpy和strcpy的根本区别
2013/04/27 面试题
应届大学生自荐信
2013/12/05 职场文书
旅游项目开发策划书
2014/01/18 职场文书
留学推荐信写作指南
2014/01/25 职场文书
德劲DE1108畅想
2021/04/22 无线电