解决Vue项目中tff报错的问题


Posted in Javascript onOctober 21, 2020

在webpack.config.js中的模块配置中加如下的配置规则:

{test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, use: "url-loader"}

const path = require('path');
const htmlWebpackplugin = require('html-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin'); 
 
module.exports = {
  entry: path.join(__dirname,'./src/main.js'),
  output: {
    path: path.join(__dirname, './dist'),
    filename: 'bundle.js'
  },
  plugins: [
    new htmlWebpackplugin({ //创建一个在内存中生成的html页面的插件
      template: path.join(__dirname, './src/index.html'),
      filename: 'index.html'
    }),
    new VueLoaderPlugin()
  ],
  module: { //这个节点用于配置所有的第三方模块加载器
    rules: [
      {test: /\.css$/, use:['style-loader','css-loader']},//配置处理.css文件的第三方处理规则
      {test: /\.less$/, use: ["style-loader",'css-loader','less-loader']},
      {test: /\.scss$/, use: ["style-loader",'css-loader','sass-loader']},
      {test: /\.(jpg|png|gif|bmp|jpeg)$/, use: "url-loader?limit=8000"},
      {test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, use: "url-loader"},
      {test:/\.js$/, use:'babel-loader',exclude:/node_modules/},
      {test: /\.vue$/, use: 'vue-loader'}
    ]
  }
};

补充知识:vue项目引入字体.ttf的操作步骤

1、下载所需要的字体,.ttf格式本文以(FZCYJ.ttf 为例)

2、在src下新建common文件,文件夹中包含以下文件

解决Vue项目中tff报错的问题

3、打开font.css

@font-face { 
 font-family: 'FZCYJ'; //重命名字体名
 src: url('FZCYJ.ttf'); //引入字体
 font-weight: normal; 
 font-style: normal; 
}

4、配置webpack.base.conf.js 文件

解决Vue项目中tff报错的问题

5、App.vue引入字体

解决Vue项目中tff报错的问题

6、可在body中设置字体

body{
 font-family: FZCYJ;
}

以上这篇解决Vue项目中tff报错的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js数据验证集合、js email验证、js url验证、js长度验证、js数字验证等简单封装
May 15 Javascript
div层的移动及性能优化
Nov 16 Javascript
Jquery弹出窗口插件 LeanModal的使用方法
Mar 10 Javascript
Javascript的表单验证-揭开正则表达式的面纱
Mar 18 Javascript
js检查是否关闭浏览器的方法
Aug 02 Javascript
ThinkJS中如何使用MongoDB的CURD操作
Dec 13 Javascript
基于VUE.JS的移动端框架Mint UI的使用
Oct 11 Javascript
phantomjs导出html到pdf的方法总结
Oct 19 Javascript
全新打包工具parcel零配置vue开发脚手架
Jan 11 Javascript
讲解vue-router之什么是嵌套路由
May 28 Javascript
javascript闭包的使用之按钮切换功能
Aug 30 Javascript
vue-drawer-layout实现手势滑出菜单栏
Nov 19 Vue.js
vue-cli3自动消除console.log()的调试信息方式
Oct 21 #Javascript
js 压缩图片的示例(只缩小体积,不更改图片尺寸)
Oct 21 #Javascript
vue-cli4使用全局less文件中的变量配置操作
Oct 21 #Javascript
Vue全局使用less样式,组件使用全局样式文件中定义的变量操作
Oct 21 #Javascript
js 图片懒加载的实现
Oct 21 #Javascript
uniapp实现可以左右滑动导航栏
Oct 21 #Javascript
解决vue-loader加载不上的问题
Oct 21 #Javascript
You might like
ThinkPHP5.1框架页面跳转及修改跳转页面模版示例
2019/05/06 PHP
PHP二维索引数组的遍历实例分析【2种方式】
2019/06/24 PHP
PHP大文件分块上传功能实例详解
2019/07/22 PHP
range 标准化之获取
2011/08/28 Javascript
js+JQuery返回顶部功能如何实现
2012/12/03 Javascript
Jquery中国地图热点效果-鼠标经过弹出提示层信息的简单实例
2014/02/12 Javascript
jQuery中toggle()函数的使用实例
2015/04/17 Javascript
贴近用户体验的Jquery日期、时间选择插件
2015/08/19 Javascript
浅谈JavaScript的全局变量与局部变量
2016/06/10 Javascript
IOS中safari下的select下拉菜单文字过长不换行的解决方法
2016/09/26 Javascript
JS+html5制作简单音乐播放器
2020/09/13 Javascript
详解bootstrap导航栏.nav与.navbar区别
2017/11/23 Javascript
基于VUE实现的九宫格抽奖功能
2018/09/30 Javascript
JointJS JavaScript流程图绘制框架解析
2019/08/15 Javascript
详解Vue后台管理系统开发日常总结(组件PageHeader)
2019/11/01 Javascript
jQuery实现的解析本地 XML 文档操作示例
2020/04/30 jQuery
vue项目查看vue版本及cli版本的实现方式
2020/10/24 Javascript
[01:08:10]2014 DOTA2国际邀请赛中国区预选赛 SPD-GAMING VS LGD-CDEC
2014/05/22 DOTA
[05:48]DOTA2英雄梦之声vol21 屠夫
2014/06/20 DOTA
python利用elaphe制作二维条形码实现代码
2012/05/25 Python
Python随机生成一个6位的验证码代码分享
2015/03/24 Python
python logging 日志轮转文件不删除问题的解决方法
2016/08/02 Python
浅谈Series和DataFrame中的sort_index方法
2018/06/07 Python
python 字符串只保留汉字的方法
2018/11/16 Python
对Python中 \r, \n, \r\n的彻底理解
2020/03/06 Python
浅谈对python中if、elif、else的误解
2020/08/20 Python
Python unittest如何生成HTMLTestRunner模块
2020/09/08 Python
优秀毕业大学生推荐信
2013/11/13 职场文书
优秀求职自荐信怎样写
2013/12/18 职场文书
就业推荐表自我鉴定范文
2014/03/21 职场文书
2014年工程部工作总结
2014/11/25 职场文书
北京故宫的导游词
2015/01/31 职场文书
药房管理制度范本
2015/08/06 职场文书
2016五一手机促销广告语
2016/01/28 职场文书
2020年元旦祝福语录,总有适合你的
2019/12/31 职场文书
Python OpenCV超详细讲解读取图像视频和网络摄像头
2022/04/02 Python