rsbuild new URL() 获取地址有问题？

Question

正确的：

new URL('../assets/images/common/404Bg.jpg', import.meta.url)

获取到地址：http://localhost:9900/static/image/404Bg.ebec95e4.jpg

有问题的：

const url = '../assets/images/common/404Bg.jpg';
new URL(url, import.meta.url)

获取到地址：file:///C:///porjectName/src/assets/images/common/404Bg.jpg
在vite构建项目的环境下，没有问题，使用rsbuild构建，出现如上问题。

请教大佬们这是为什么，怎么破解。

Answer 1

是因为由于 rsbuild 和 vite 在处理相对路径时的差异引起的。
针对你在使用 rsbuild 构建项目时遇到的路径问题，可以使用以下解决方案：
更新 rsbuild 和 rspack 并添加 pluginSass 到配置中：
确保你使用的是最新版本的 rsbuild 和 rspack。
在 rsbuild 配置中添加 pluginSass。
具体步骤如下：

// rsbuild.config.js
import { defineConfig } from 'rsbuild';
import { pluginSass } from '@rsbuild/plugin-sass';

export default defineConfig({
  plugins: [pluginSass()],
  // 其他配置项
});

你可以使用以下命令来安装这个插件：
npm add @rsbuild/plugin-sass -D