Vite+Vue3项目配置加载本地字体报错无法生效该如何处理？

问题根因 #

你的配置逻辑本身没有语法错误，出现问题是Vite和Vue CLI（基于Webpack）对SCSS中相对路径的解析规则不一致导致的：
你通过additionalData全局注入main.scss到所有SCSS文件时，@font-face里写的./fonts/xxx.ttf相对路径，不会以main.scss所在的assets/styles/目录为基准解析，而是会以最终引用了这段样式的业务页面/组件的SCSS文件所在目录为基准解析，最终拼接出的路径错误，才会请求根路径下的/fonts/xxx.ttf导致404。

可行解决方案，任选一种即可： #

方案1：修改字体路径为带别名的绝对路径 #

在SCSS的url()中使用别名时需要加~前缀标识，修改main.scss里的@font-face配置：

@font-face {
  font-family: 'Opensans-Bold';
  font-style: normal;
  src: local('Opensans-Bold'), url(~@/assets/styles/fonts/OpenSans-Bold.ttf) format('truetype');
}
@font-face {
  font-family: 'Opensans-Light';
  font-style: normal;
  src: local('Opensans-Light'), url(~@/assets/styles/fonts/OpenSans-Light.ttf) format('truetype');
}

方案2：迁移字体文件到public目录 #

将assets/styles/fonts整个文件夹移动到项目根目录的public文件夹下，Vite会自动将public下的资源映射到服务根路径，无需修改SCSS配置即可正常加载。

方案3：取消全局注入改为入口引入 #

删掉vite.config中css.preprocessorOptions.scss.additionalData的配置，在项目入口文件main.js/main.ts中直接引入全局样式：

import '@/assets/styles/main.scss'

这种引入方式下SCSS的相对路径会以main.scss本身所在目录为基准解析，和Vue CLI的行为一致。

内容的提问来源于stack exchange，提问作者Nikola Pavicevic