有没有办法确保 electro-vite/rollup 使用对已编译资产的绝对引用？

Question

详情

我正在编写一个 Electron-vite 应用程序，它使用 React-router-dom 进行路由。我将“renderer”文件夹部署到 vercel，并在根目录下部署 vercel.json。

现在，当我从根域开始导航时，该应用程序工作正常，但一旦我将网址（例如 https://example.com/app/transfers/id）复制到另一个选项卡，它只会显示一个空白屏幕。

调查控制台，我可以看到它无法获取由rollup生成的捆绑js文件。

然后，当我查看“源”选项卡时，我可以看到这是因为它尝试访问资产使用相对路径的文件夹：

我知道这是问题所在，因为当我在开发人员工具中启用本地覆盖并手动删除“.”时在小路前面，一切正常。

这是有道理的，因为我们应该在以下位置寻找生成的包：

https://example.com/assets/bundle.js

并不是：

https://example.com/app/transfers/id/assets/bundle.js

我知道通过切换到 HashRouter 而不是浏览器路由器可以轻松解决这个问题，事实上我有代码可以根据您是否在浏览器中运行电子应用程序在 HashRouter 和 BrowserRouter 之间切换。

但如果可能的话，我希望避免在浏览器中使用 HashRouter。

我知道 vite 基本路径配置选项。将其设置为

仍然不会产生好的结果（无论我传递给

base

什么，捆绑的html保持不变）：

那么有没有其他方法可以解决这个问题，或者有一种方法可以确保包始终查找其绝对路径？

Answer 1

解决这个问题的方法很简单，就是在我的 html

base

标签中放置一个

head

标签，如下所示：

<head>
  <meta charset="UTF-8" />
  <title>Electron</title>
  <base href="/" />
</head>

HTML 元素指定用于文档中所有相对 URL 的基本 URL。文档中只能有一个元素。

文档使用的基本 URL 可以通过带有 Node.baseURI 的脚本访问。如果文档没有元素，则 baseURI 默认为 location.href。

对于这种情况来说这是一个完美的解决方案，因为问题在于 vite/rollup 为我生成的 JS 和 css 包生成相对 URL。

干杯。