Laravel+Vite中CSS资源路径错误问题求助

你的问题本质是开发环境下Vite前端服务器（端口5173）与Laravel应用服务器（端口8000）的资源路径解析冲突，以下是几种可靠的解决方式：

方法1：通过Blade模板注入正确路径 #

直接在Blade视图中使用Laravel的asset()辅助函数生成字体文件的绝对URL，避免在静态CSS文件中硬编码路径：

<style>
@font-face {
    font-family: 'SomeFont';
    src: url('{{ asset('fonts/some-font.eot') }}');
    src: url('{{ asset('fonts/some-font.eot?#iefix') }}') format('embedded-opentype'),
         url('{{ asset('fonts/some-font.woff2') }}') format('woff2'),
         url('{{ asset('fonts/some-font.woff') }}') format('woff'),
         url('{{ asset('fonts/some-font.ttf') }}') format('truetype');
    font-weight: normal;
    font-style: normal;
}
</style>

这种方式能确保无论开发还是生产环境，路径都指向Laravel应用服务器的public目录。

方法2：配置Vite服务器的Origin地址 #

修改项目根目录下的vite.config.js，指定Vite服务器的origin为Laravel应用的地址，让Vite将CSS中的绝对路径解析到正确的服务器：

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,
        }),
    ],
    server: {
        origin: 'http://127.0.0.1:8000',
    },
});

修改后重启Vite开发服务器，此时CSS中的/fonts/some-font.eot会被正确解析为http://127.0.0.1:8000/fonts/some-font.eot。

方法3：使用相对路径（需注意路径结构） #

如果字体文件的相对位置固定，可使用相对路径替代绝对路径。例如编译后CSS文件会生成在public/build/css目录下，对应字体文件在public/fonts，则相对路径应为：

@font-face {
    font-family: 'SomeFont';
    src: url('../../fonts/some-font.eot');
    /* 其他格式路径同理 */
}

这种方式的缺点是如果后续资源目录结构调整，路径需要同步修改，稳定性不如前两种方法。

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