解決Vue項目中tff報錯的問題
在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)建一個在內(nèi)存中生成的html頁面的插件
template: path.join(__dirname, './src/index.html'),
filename: 'index.html'
}),
new VueLoaderPlugin()
],
module: { //這個節(jié)點用于配置所有的第三方模塊加載器
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'}
]
}
};
補充知識:vue項目引入字體.ttf的操作步驟
1、下載所需要的字體,.ttf格式本文以(FZCYJ.ttf 為例)
2、在src下新建common文件,文件夾中包含以下文件

3、打開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項目中tff報錯的問題就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue單頁面應(yīng)用打開新窗口顯示跳轉(zhuǎn)頁面的實例
今天小編就為大家分享一篇vue單頁面應(yīng)用打開新窗口顯示跳轉(zhuǎn)頁面的實例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
vue實力踩坑?當(dāng)前頁push當(dāng)前頁無效的解決
這篇文章主要介紹了vue實力踩坑?當(dāng)前頁push當(dāng)前頁無效的解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-04-04
vue 點擊按鈕實現(xiàn)動態(tài)掛載子組件的方法
今天小編就為大家分享一篇vue 點擊按鈕實現(xiàn)動態(tài)掛載子組件的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
在vue中路由使用this.$router.go(-1)返回兩次問題
這篇文章主要介紹了在vue中路由使用this.$router.go(-1)返回兩次問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-12-12
vue data恢復(fù)初始化數(shù)據(jù)的實現(xiàn)方法
今天小編就為大家分享一篇vue data恢復(fù)初始化數(shù)據(jù)的實現(xiàn)方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10
如何修改element-ui日期下拉框datetimePicker的背景色樣式
這篇文章主要介紹了修改element-ui日期下拉框datetimePicker的背景色樣式的操作代碼,本文給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-07-07

