解决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 相关文章推荐
window.event快达到全浏览器支持了,以后使用就方便了
Nov 30 Javascript
关于event.cancelBubble和event.stopPropagation()的区别介绍
Dec 11 Javascript
Jquery遍历Json数据的方法
Apr 20 Javascript
JS组件Bootstrap Select2使用方法详解
Apr 17 Javascript
JS之相等操作符详解
Sep 13 Javascript
基于Vue.js实现简单搜索框
Mar 26 Javascript
jQuery编写网页版2048小游戏
Jan 06 Javascript
基于AGS JS开发自定义贴图图层
Mar 31 Javascript
vuex 解决报错this.$store.commit is not a function的方法
Dec 17 Javascript
详解js location.href和window.open的几种用法和区别
Dec 02 Javascript
多页vue应用的单页面打包方法(内含打包模式的应用)
Jun 11 Javascript
详解Vue的sync修饰符
May 15 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
网站当前的在线人数
2006/10/09 PHP
用PHP连接MySQL代码的参数说明
2008/06/07 PHP
使用php判断服务器是否支持Gzip压缩功能
2013/09/24 PHP
php smarty模板引擎的6个小技巧
2014/04/24 PHP
php中把美国时间转为北京时间的自定义函数分享
2014/07/28 PHP
PHP 常用的header头部定义汇总
2015/06/19 PHP
PHP常用的小程序代码段
2015/11/14 PHP
基于PHP实现数据分页显示功能
2016/05/26 PHP
thinkphp整合系列之极验滑动验证码geetest功能
2019/06/18 PHP
js自定义鼠标右键的实现原理及源码
2014/06/23 Javascript
提升PHP安全:8个必须修改的PHP默认配置
2014/11/17 Javascript
jquery实现搜索框常见效果的方法
2015/01/22 Javascript
jQuery选择器源码解读(二):select方法
2015/03/31 Javascript
基于jquery实现左右按钮点击的图片切换效果
2021/01/27 Javascript
Bootstrap3制作自己的导航栏
2016/05/12 Javascript
javascript特效实现——当前时间和倒计时效果的简单实例
2016/07/20 Javascript
javascript显示系统当前时间代码
2016/12/29 Javascript
jquery滚动条插件slimScroll使用方法
2017/02/09 Javascript
Vue AST源码解析第一篇
2017/07/19 Javascript
vue实现某元素吸顶或固定位置显示(监听滚动事件)
2017/12/13 Javascript
python中循环语句while用法实例
2015/05/16 Python
Python中格式化format()方法详解
2017/04/01 Python
python实现八大排序算法(1)
2017/09/14 Python
详解Python requests 超时和重试的方法
2018/12/18 Python
Python设计模式之工厂方法模式实例详解
2019/01/18 Python
Python Excel处理库openpyxl使用详解
2019/05/09 Python
安装pyinstaller遇到的各种问题(小结)
2020/11/20 Python
CSS3 text shadow字体阴影效果
2016/01/08 HTML / CSS
深入浅析CSS3中的Flex布局整理
2020/04/27 HTML / CSS
澳大利亚儿童和婴儿产品在线商店:Lime Tree Kids
2017/10/05 全球购物
汽车专业毕业生推荐信
2013/11/12 职场文书
六查六看自查材料
2014/02/17 职场文书
反对邪教标语
2014/06/30 职场文书
优秀少先队员事迹材料
2014/12/24 职场文书
高校自主招生校长推荐信
2015/03/23 职场文书
css3实现背景图片颜色修改的多种方式
2021/04/13 HTML / CSS