在Vite dev环境中不提供静态字体文件

Question

我正试图在现有的Laravel应用程序中从webpack切换到vite。为了当地的发展，我使用了Laravel。

如果我运行vite build，所有东西都能正常工作(图像、字体、scss)，但是如果我运行vite，我唯一得到的错误就是它没有正确地获得字体路径(错误404)：

https://example.test:5173/fonts/open-sans/regular-400.woff2

没有港口，它就能工作。

我读了很多书，我想我什么都试过了：

在Vite配置中尝试(失败)：

export default defineConfig(({ command, mode }) => {

    return {
        // root: './',
        // base: './',
        // publicDir: 'public',
        // assetsInclude: ['public/fonts'],

        // Rest of the configuration are Plugins (Laravel, Vue), Alias etc...            
    }
});

所以我试着改变root，base，publicDir和assetsInclude，而不记得还有什么.他们中没有一个没有解决我的问题。

我的公用文件夹的结构：

- public
  - build
    - assets
  - fonts
  - images

css字体-外观：

@font-face {
    ...
    url('/fonts/open-sans/regular-400.woff2') format('woff2'),
    url('/fonts/open-sans/regular-400.woff') format('woff');
}

Answer 1

我找到的解决方案是只在dev环境中为字体路径(public/font)添加别名：

export default defineConfig(({ command, mode }) => {

    const alias = {
       (some alias),       
    };

    // dev environment
    if (command === 'serve') {
        Object.assign(alias, { '/fonts': path.resolve(__dirname, 'public/fonts') });
    }
    
    return {
        ...
        resolve: {
            alias
       }
    }
});

我认为这是一个Vite错误，我不知道这是否是最好的解决方案，所以我愿意接受任何建议。