vue3引入字体ttf文件报错

解决方案

在Vue 3项目中引入ttf字体文件时遇到问题，通常是由于配置或引用方式不正确导致的。最直接有效的解决方案是通过配置vue.config.js文件来确保Webpack能够正确处理字体文件，并且使用正确的路径进行引用。

1. 检查项目配置

需要确保项目的构建工具（如 Webpack）能正确识别和处理字体文件。如果项目中没有vue.config.js文件，则可以在项目根目录下创建一个。然后添加如下代码：
javascript
module.exports = {
chainWebpack: config => {
config.module
.rule('fonts')
.test /.(woff2?|eot|ttf|otf)(?.*)?$/i)
.use('url-loader')
.loader('url-loader')
.tap(option => ({
...option,
limit: 10000, // 小于10k自动转为base64编码
name: 'fonts/[name].[hash:7].[ext]' // 输出路径及命名规则
}))
}
}

这段配置的作用是让Webpack使用url-loader来处理字体文件，同时设置了输出路径和文件名的格式。

2. 正确引用字体文件

在样式文件中正确引用字体文件也非常重要。下面是一个完整的例子，假设字体文件位于src/assets/fonts/your-font.ttf：

方法一：CSS @font-face 引用

css
@font-face {
    font-family: 'MyCustomFont';
    src: url('../assets/fonts/your-font.ttf') format('truetype');
}</p>

<p>body {
    font-family: 'MyCustomFont', sans-serif;
}

方法二：相对路径引用

如果你不想使用@font-face，也可以直接在样式中使用相对路径引用字体文件：
css
body {
font-family: 'MyCustomFont', sans-serif;
/* 直接使用相对路径 */
background-image: url('../assets/fonts/your-font.ttf');
}


3. 清除缓存并重新编译

有时候即使修改了配置文件，仍然可能看不到效果。这可能是由于开发服务器缓存的原因。此时可以尝试以下操作：
1. 关闭正在运行的开发服务器
2. 删除node_modules文件夹和package-lock.json文件
3. 执行npm install重新安装依赖包
4. 再次启动开发服务器npm run serve

经过以上步骤后，应该能够成功引入ttf字体文件而不会出现错误。如果还是存在问题，请检查控制台的具体报错信息，以便进一步排查原因。