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 相关文章推荐
表格 隔行换色升级版
Nov 07 Javascript
JavaScript DOM 学习第三章 内容表格
Feb 19 Javascript
document.createElement()用法
Mar 13 Javascript
导航跟随滚动条置顶移动示例代码
Sep 11 Javascript
JQuery ztree带筛选、异步加载实例讲解
Feb 25 Javascript
jquery设置表单元素为不可用的简单代码
Jul 04 Javascript
Vue.js快速入门实例教程
Oct 15 Javascript
浅谈js算法和流程控制
Dec 29 Javascript
JS中使用 after 伪类清除浮动实例
Mar 01 Javascript
微信小程序录音与播放录音功能
Dec 25 Javascript
layui递归实现动态左侧菜单
Jul 26 Javascript
JS数组方法concat()用法实例分析
Jan 18 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的chr和ord函数实现字符加减乘除运算实现代码
2011/12/05 PHP
PHP获取MySql新增记录ID值的3种方法
2014/06/24 PHP
PHP实现求两个字符串最长公共子串的方法示例
2017/11/17 PHP
javascript setTimeout()传递函数参数(包括传递对象参数)
2010/04/07 Javascript
JavaScript判断窗口是否最小化的代码(跨浏览器)
2010/08/01 Javascript
Node.js文件操作详解
2014/08/16 Javascript
JavaScript读二进制文件并用ajax传输二进制流的方法
2016/07/18 Javascript
Web安全测试之XSS实例讲解
2016/08/15 Javascript
基于JavaScript实现跳转提示页面
2016/09/24 Javascript
完美解决jQuery fancybox ie 无法显示关闭按钮的问题
2016/11/29 Javascript
WEB开发之注册页面验证码倒计时代码的实现
2016/12/15 Javascript
基于JavaScript实现的快速排序算法分析
2017/04/14 Javascript
jQuery 实时保存页面动态添加的数据的示例
2017/08/14 jQuery
JavaScript中使用Async实现异步控制
2017/08/15 Javascript
微信小程序实现表单校验功能
2020/03/30 Javascript
关于vue的语法规则检测报错问题的解决
2018/05/21 Javascript
json.stringify()与json.parse()的区别以及用处
2021/01/25 Javascript
[02:36]DOTA2亚洲邀请赛小组赛精彩集锦:EE凭借法力虚空拿下4杀
2017/03/30 DOTA
使用Python编写一个在Linux下实现截图分享的脚本的教程
2015/04/24 Python
Python实现以时间换空间的缓存替换算法
2016/02/19 Python
Python遍历pandas数据方法总结
2018/02/09 Python
Django使用详解:ORM 的反向查找(related_name)
2018/05/30 Python
Python实现 版本号对比功能的实例代码
2019/04/18 Python
使用Python实现跳帧截取视频帧
2019/05/31 Python
Python的matplotlib绘图如何修改背景颜色的实现
2019/07/16 Python
django中使用POST方法获取POST数据
2019/08/20 Python
常用UNIX 命令(Linux的常用命令)
2013/07/10 面试题
英文版餐饮业求职信
2013/10/18 职场文书
草船借箭教学反思
2014/02/03 职场文书
企业承诺书怎么写
2014/05/24 职场文书
2015年上半年信访工作总结
2015/03/30 职场文书
离职信范文
2015/06/23 职场文书
python基础之停用词过滤详解
2021/04/21 Python
python基础之爬虫入门
2021/05/10 Python
MySQL中几种插入和批量语句实例详解
2021/09/14 MySQL
Python多线程实用方法以及共享变量资源竞争问题
2022/04/12 Python