谁能详细解释一下Vite renderBuiltUrl吗？

Question

我正在使用 React Web 应用程序，使用 vite 作为构建工具

构建我的应用程序后，在构建文件夹中生成所有资产（js、css、svg、png、jpg）

在 vite 配置中我定义了基础：https://x.y.com 在这种情况下，所有资源都将从上述基本网址下载

Ex: 
   https://x.y.com/assets/index.asdasd.js
   https://x.y.com/assets/print.qwjhgkjf.svg

它工作得很好。

但是我现在拥有的是我的所有资产都在 2 个不同的 cdns 中

• 所有图像资源都在 https://img.x.com/...
• 所有其他资产都在 https://js.x.com/....

我必须如下配置vite

    experimental: {
      renderBuiltUrl(filename: string, { hostId, hostType, type }) {
    
        const paths = filename.split('.');
        const ext = paths[paths.length - 1];
        
        if (hostType !== 'html') {
          if (imgExt[ext]) {
            return { runtime: 'https://img.x.com' };
          }
          return { runtime: 'https://js.x.com' };
        } else {
          return { relative: true };
        }
  }

但这给我带来了错误

[vite:css-post] { runtime: "https://img.x.com/ }" is not supported for assets in css files: assets/leftArrow.e0fcee6e.svg
error during build:
Error: { runtime: "https://img.x.com/ }" is not supported for assets in css files: assets/leftArrow.e0fcee6e.svg

Answer 1

可以仅对 js 文件使用“运行时”选项（不适用于 css、图像等资源）。 所以配置应该是这样的：

experimental: {
  renderBuiltUrl(filename: string, { hostType }) {
    const ext = filename.split('.').at(-1);

    if (hostType === 'js') {
      return { runtime: 'https://js.x.com' }
    }
        
    if (imgExt[ext]) {
      return { runtime: 'https://img.x.com' };
    }

    return { relative: true };
}