當我們使用Vue腳手架搭建項目時，很多人經常忽略了字體配置這個細節。但是，優化字體配置可以有效提高頁面的加載速度和用戶的體驗感。本文將介紹如何優化Vue腳手架項目的字體配置。

首先，我們需要在Vue項目中添加一個CSS預處理器，例如less或sass。在安裝完預處理器后，在項目的src目錄下新建一個fonts文件夾，并將所有需要用到的字體文件放在該文件夾下。

// App.vue
@font-face {
font-family: 'Montserrat';
src: url('../../fonts/Montserrat-Regular.ttf') format('woff2'),
url('../../fonts/Montserrat-Regular.woff') format('woff'),
url('../../fonts/Montserrat-Regular.eot') format('eot'),
url('../../fonts/Montserrat-Regular.svg#Montserrat-Regular') format('svg');
font-weight: normal;
font-style: normal;
}
body {
font-family: 'Montserrat', sans-serif;
}

然后，在vue.config.js文件中添加以下代碼，以將字體文件加載到打包后的CSS中：

// vue.config.js
module.exports = {
css: {
loaderOptions: {
css: {},
less: {
modifyVars: {},
javascriptEnabled: true
},
scss: {
additionalData: `@import "@/assets/scss/variables.scss";`
}
},
extract: {
filename: 'css/[name].[contenthash].css',
chunkFilename: 'css/[id].[contenthash].css'
},
sourceMap: true
},
chainWebpack: config => {
const fontRule = config.module.rule('fonts')
fontRule
.test(/\.(woff2?|eot|ttf|otf)(\?.*)?$/i)
.use('url-loader')
.loader('url-loader')
.tap(options => {
options.limit = 100000
options.name = 'font/[name].[hash:7].[ext]'
return options
})
const imgRule = config.module.rule('images')
imgRule
.test(/\.(png|jpe?g|gif|webp)(\?.*)?$/)
.use('url-loader')
.loader('url-loader')
.tap(options => {
options.limit = 4096
options.name = 'img/[name].[hash:7].[ext]'
return options
})
}
}

最后，重新啟動項目并打包即可。