Laravel 11 + Vite 如何生成指定相对/带子目录的URL？

方案一：生成相对URL（./my-font.eot） #

1. 调整字体文件位置：将字体文件移至resources/fonts目录（让Vite能追踪并处理该资源）
2. 修改SCSS引用路径：替换原路径为Vite可解析的别名路径

   src:url("@/fonts/my-font.eot");
   

   （@在Laravel Vite中默认指向resources目录）
3. 配置Vite：在vite.config.js中调整构建参数，生成相对路径并取消资源子目录嵌套

   import { defineConfig } from 'vite';
   import laravel from 'laravel-vite-plugin';
   
   export default defineConfig({
       plugins: [
           laravel({
               input: ['resources/css/app.scss', 'resources/js/app.js'],
               build: {
                   assetsDir: '', // 不将资源打包到assets子目录
                   relative: true, // 启用相对路径生成
               },
           }),
       ],
   });
   

   构建后CSS中的字体路径会变为src:url(./my-font.eot)

方案二：生成带/my-app子目录的绝对URL #

1. 调整字体文件位置：同方案一，放至resources/fonts目录
2. 修改SCSS引用路径：同方案一，使用@/fonts/my-font.eot
3. 配置Vite基础路径：在vite.config.js中设置项目基础路径

   import { defineConfig } from 'vite';
   import laravel from 'laravel-vite-plugin';
   
   export default defineConfig({
       base: '/my-app/', // 指定项目根路径前缀
       plugins: [
           laravel({
               input: ['resources/css/app.scss', 'resources/js/app.js'],
           }),
       ],
   });
   

4. 同步Laravel配置：在.env文件中更新应用URL，确保资源路径匹配

   APP_URL=https://your-domain.com/my-app
   

   构建后CSS中的字体路径会变为src:url(/my-app/build/assets/my-font.eot)

关键说明 #

• 之前调整root和publicDir无效，是因为Laravel Vite插件封装了底层配置，需在插件的build选项或Vite根配置中设置对应参数
• 若字体文件已放在public/fonts且无需Vite处理哈希，可直接写绝对路径src:url("/my-app/fonts/my-font.eot")，但这种方式无法享受Vite的资源缓存优化

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