与 Laravel 11 vite 的相对路径

Question

在带有 vite 的 Laravel 11 中，我正在我的 .scss 文件中加载字体：

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

Vite 使用 .env 中的 APP_URL 将此构建到此 css 中：

src:url(https://www.mypage.com/build/assets/my-font.eot);

我如何告诉 vite 创建相对 URL，例如：

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

没有域的绝对路径对我来说也很好：

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

我搜索了手册并尝试了很多选项但没有成功。

Answer 1

这是一个示例，希望您能了解相对路径

//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'],
            refresh: true,
        }),
    ],
    build: {
        // Use relative paths for assets
        assetsInlineLimit: 0,
        rollupOptions: {
            output: {
                assetFileNames: 'assets/[name].[hash][extname]',
            },
        },
    },
    css: {
        devSourcemap: true,
    },
    resolve: {
        alias: {
            // Your aliases if needed
        },
    },
    base: './', // This makes asset paths relative to the current path
});

备注：

1. base: './'：这使得Vite生成资产的相对路径。它指示 Vite 将输出基本路径视为相对路径，因此将生成像 ./my-font.eot 这样的 URL，而不是带有域的绝对 URL。

2. assetsInlineLimit: 0：当资源（如字体或图像）小于一定大小时，这会阻止 Vite 将其内联为 Base64 字符串。通过将其设置为 0，所有资源都将通过 URL 引用，而不是内联。