Vite+Vue3构建后font-face字体路径错误求助

架构老林

2026-7-11

解决Vite构建Vue应用时字体路径指向错误的问题

问题根源

构建后生成的main.css中，字体文件的引用路径是网站根目录绝对路径（如/shared/fonts/test.eot），但实际字体文件被打包到了指定的my-build-dir-path目录下，导致浏览器无法定位到字体资源。

解决方案

1. 配置Vite的相对路径基础（base）

在vite.config.ts的build配置中添加base: './'，让所有资源路径变为相对当前HTML文件的路径，适配构建目录的部署位置：

export default ({ mode }: { mode: string }): UserConfig => {
  process.env = { ...process.env, ...loadEnv(mode, process.cwd()) };

  return defineConfig({
    plugins: [vue({})],
    build: {
      target: 'esnext',
      manifest: true,
      outDir: './my-build-dir-path',
      base: './', // 新增相对路径基础配置
      rollupOptions: {
        // 原有rollup配置...
      }
    },
    // 原有resolve配置...
  });
};

2. 修正`@shared`别名的路径

将@shared的别名从绝对根路径/shared改为项目根相对路径./shared，确保Vite能正确解析并打包字体文件：

resolve: {
  alias: {
    '@shared': './shared', // 修改为相对路径
    '@': '/src'
  }
}

3. （可选）统一字体文件输出位置

如果希望字体文件集中输出到构建目录的fonts子文件夹，可以调整Rollup的assetFileNames配置，单独处理字体资源：

rollupOptions: {
  input: `./src/main.ts`,
  output: {
    entryFileNames: '[name].js',
    chunkFileNames: '[name]-[hash].js',
    assetFileNames: (assetInfo) => {
      // 匹配字体文件后缀，输出到fonts目录
      const fontExts = ['.eot', '.woff2', '.woff', '.ttf'];
      if (assetInfo.name && fontExts.some(ext => assetInfo.name.endsWith(ext))) {
        return 'fonts/[name].[ext]';
      }
      return '[name].[ext]';
    },
    globals: {
      vue: 'Vue'
    }
  }
}