解決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中設置字體
body{ font-family: FZCYJ; }
以上這篇解決Vue項目中tff報錯的問題就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關文章
Vue實現(xiàn)動態(tài)添加或者刪除對象和對象數(shù)組的操作方法
這篇文章主要介紹了在Vue項目中實現(xiàn)動態(tài)添加或者刪除對象和對象數(shù)組的操作方法,本文通過實例代碼給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下2018-09-09vue如何在用戶要關閉當前網(wǎng)頁時彈出提示的實現(xiàn)
這篇文章主要介紹了vue如何在用戶要關閉當前網(wǎng)頁時彈出提示的實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2020-05-05element el-table實現(xiàn)多級表頭的代碼
多級表頭的作用與優(yōu)勢,多級表頭能夠清晰地展示數(shù)據(jù)的層次結(jié)構(gòu),幫助我們更好地理解數(shù)據(jù)之間的關系,下面通過本文給大家介紹element el-table實現(xiàn)多級表頭的代碼,感興趣的朋友跟隨小編一起看看吧2024-04-04Vue使用provide各種傳值后inject獲取undefined的問題及解決
這篇文章主要介紹了Vue使用provide各種傳值后inject獲取undefined的問題及解決,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-08-08vue.js使用Element-ui實現(xiàn)導航菜單
這篇文章主要為大家詳細介紹了vue.js使用Element-ui中實現(xiàn)導航菜單,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2021-09-09