Laravel项目Vite构建后Font Awesome 6图标无法显示求助

1. 调整Vite资源基础路径 #

打开项目根目录的vite.config.js，添加base配置项指定构建资源的根路径，确保所有静态资源引用都会带上/build/前缀：

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
    ],
    base: '/build/' // 新增此行，指定构建资源的基础路径
});

2. 规范Font Awesome导入方式 #

在resources/css/app.css中直接导入官方CSS文件，不要手动修改Font Awesome内置的字体路径，让Vite自动处理资源映射：

@import '@fortawesome/fontawesome-free/css/all.css';

3. 清理旧构建文件并重新构建 #

删除public/build目录下的所有旧文件，避免缓存干扰，然后重新执行构建命令：

rm -rf public/build
npm run build

4. 确认Blade模板的资源引用 #

确保模板中使用Laravel提供的@vite指令加载资源，不要手动写固定路径：

@vite(['resources/css/app.css', 'resources/js/app.js'])

问题原因 #

开发模式（npm run dev）下Vite会动态代理资源请求，自动处理路径；但生产构建后生成的静态文件需要明确基础路径，否则Vite会默认从网站根目录加载资源，导致字体文件请求指向/assets/而非实际存放的/build/assets/。

内容的提问来源于stack exchange，提问作者Lesley Peters