溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這期內容當中小編將會給大家帶來有關Vue項目中的tff出現報錯怎么解決，文章內容豐富且以專業的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。
在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文件，文件夾中包含以下文件
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中設置字體
body{
font-family: FZCYJ;
}上述就是小編為大家分享的Vue項目中的tff出現報錯怎么解決了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關知識，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
