解決Vue項(xiàng)目中tff報(bào)錯(cuò)的問(wèn)題
更新時(shí)間：2020年10月21日 14:38:36 作者：朽木自雕xmzd
這篇文章主要介紹了解決Vue項(xiàng)目中tff報(bào)錯(cuò)的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
在webpack.config.js中的模塊配置中加如下的配置規(guī)則：
{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({ //創(chuàng)建一個(gè)在內(nèi)存中生成的html頁(yè)面的插件
template: path.join(__dirname, './src/index.html'),
filename: 'index.html'
}),
new VueLoaderPlugin()
],
module: { //這個(gè)節(jié)點(diǎn)用于配置所有的第三方模塊加載器
rules: [
{test: /\.css$/, use:['style-loader','css-loader']},//配置處理.css文件的第三方處理規(guī)則
{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'}
]
}
};
補(bǔ)充知識(shí)：vue項(xiàng)目引入字體.ttf的操作步驟
1、下載所需要的字體，.ttf格式本文以（FZCYJ.ttf 為例）
2、在src下新建common文件，文件夾中包含以下文件
3、打開(kāi)font.css
@font-face {
font-family: 'FZCYJ'; //重命名字體名
src: url('FZCYJ.ttf'); //引入字體
font-weight: normal;
font-style: normal;
}
4、配置webpack.base.conf.js 文件
5、App.vue引入字體
6、可在body中設(shè)置字體
body{
font-family: FZCYJ;
}
以上這篇解決Vue項(xiàng)目中tff報(bào)錯(cuò)的問(wèn)題就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue單頁(yè)面應(yīng)用打開(kāi)新窗口顯示跳轉(zhuǎn)頁(yè)面的實(shí)例
今天小編就為大家分享一篇vue單頁(yè)面應(yīng)用打開(kāi)新窗口顯示跳轉(zhuǎn)頁(yè)面的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
vue實(shí)力踩坑?當(dāng)前頁(yè)push當(dāng)前頁(yè)無(wú)效的解決
這篇文章主要介紹了vue實(shí)力踩坑?當(dāng)前頁(yè)push當(dāng)前頁(yè)無(wú)效的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
在?Vue3?項(xiàng)目開(kāi)發(fā)中,事件冒泡經(jīng)常會(huì)導(dǎo)致一些意想不到的問(wèn)題,本文為大家整理了五個(gè)Vue3中阻止事件冒泡的方法,希望對(duì)大家有一定的幫助2024-11-11
vue 點(diǎn)擊按鈕實(shí)現(xiàn)動(dòng)態(tài)掛載子組件的方法
今天小編就為大家分享一篇vue 點(diǎn)擊按鈕實(shí)現(xiàn)動(dòng)態(tài)掛載子組件的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
在vue中路由使用this.$router.go(-1)返回兩次問(wèn)題
這篇文章主要介紹了在vue中路由使用this.$router.go(-1)返回兩次問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-12-12
vue data恢復(fù)初始化數(shù)據(jù)的實(shí)現(xiàn)方法
今天小編就為大家分享一篇vue data恢復(fù)初始化數(shù)據(jù)的實(shí)現(xiàn)方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-10-10
vue調(diào)取電腦攝像頭實(shí)現(xiàn)拍照功能
這篇文章主要為大家詳細(xì)介紹了vue調(diào)取電腦攝像頭實(shí)現(xiàn)拍照功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要為大家詳細(xì)介紹了vue.js模擬日歷插件的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
如何修改element-ui日期下拉框datetimePicker的背景色樣式
這篇文章主要介紹了修改element-ui日期下拉框datetimePicker的背景色樣式的操作代碼,本文給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-07-07
本文主要介紹了vue單頁(yè)面改造多頁(yè)面應(yīng)用詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06