解决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 相关文章推荐
验证码按回车不变解决方法
Mar 29 Javascript
js去字符串前后空格5种实现方法及比较
Apr 03 Javascript
js动态切换图片的方法
Jan 20 Javascript
jQuery的Scrollify插件实现滑动到页面下一节点
Jul 05 Javascript
轻松掌握jQuery中wrap()与unwrap()函数的用法
May 24 Javascript
Javascript中的迭代、归并方法详解
Jun 14 Javascript
jQuery 局部div刷新和全局刷新方法总结
Oct 05 Javascript
JS鼠标3次点击事件实现代码及扩展思路
Sep 12 Javascript
Vue组件之自定义事件的功能图解
Feb 01 Javascript
Vue v-model组件封装(类似弹窗组件)
Jan 08 Javascript
用JS实现选项卡
Mar 23 Javascript
JavaScript实现矩形块大小任意缩放
Aug 25 Javascript
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
收音机史话 - 1960年代前后的DIY
2021/03/02 无线电
PHP获取本周所有日期或者最近七天所有日期的方法
2018/06/20 PHP
SUN的《AJAX与J2EE》全文译了
2007/02/23 Javascript
javascript应用:Iframe自适应其加载的内容高度
2007/04/10 Javascript
javascript web对话框与弹出窗口
2009/02/22 Javascript
理解 JavaScript 预解析
2009/10/25 Javascript
js 定时器setTimeout无法调用局部变量的解决办法
2013/11/28 Javascript
JS显示下拉列表框内全部元素的方法
2015/03/31 Javascript
JQuery实现动态添加删除评论的方法
2015/05/18 Javascript
拥有一个属于自己的javascript表单验证插件
2016/03/24 Javascript
jQuery EasyUI编辑DataGrid用combobox实现多级联动
2016/08/29 Javascript
详解require.js配置路径的用法和css的引入
2017/09/06 Javascript
js前端导出Excel的方法
2017/11/01 Javascript
优雅的处理vue项目异常实战记录
2019/06/05 Javascript
原生JavaScript实现幻灯片效果
2021/02/19 Javascript
[08:54]DOTA2-DPC中国联赛 正赛 Aster vs LBZS 选手采访
2021/03/11 DOTA
Windows 7下Python Web环境搭建图文教程
2018/03/20 Python
python中类的输出或类的实例输出为这种形式的原因
2019/08/12 Python
详解python opencv、scikit-image和PIL图像处理库比较
2019/12/26 Python
Python更新所有已安装包的操作
2020/02/13 Python
python关于变量名的基础知识点
2020/03/03 Python
Django 允许局域网中的机器访问你的主机操作
2020/05/13 Python
解决pyinstaller 打包exe文件太大,用pipenv 缩小exe的问题
2020/07/13 Python
Lombok插件安装(IDEA)及配置jar包使用详解
2020/11/04 Python
selenium如何定位span元素的实现
2021/01/13 Python
2分钟教你实现环形/扇形菜单(基础版)
2020/01/15 HTML / CSS
HTML5打开手机扫码功能及优缺点
2017/11/27 HTML / CSS
澳大利亚领先的皮肤诊所:Skin Matrix(抗衰老、痤疮专家、药妆护肤)
2018/05/20 全球购物
在线吉他课程,学习如何弹吉他:Fender Play
2019/02/28 全球购物
纯净、自信、100%的羊绒服装:360Cashmere
2021/02/20 全球购物
高中生学习的自我评价
2013/12/14 职场文书
电大毕业个人生自我鉴定
2014/03/26 职场文书
初三学生评语大全
2014/04/24 职场文书
2016年社区“我们的节日·中秋节”活动总结
2016/04/05 职场文书
Redis遍历所有key的两个命令(KEYS 和 SCAN)
2021/04/12 Redis
python glom模块的使用简介
2021/04/13 Python