如何通过配置删除故事书静态包的/assets/iframe.{x}前面的前导斜杠

Question

简介

我有一个网站，在那里我服务于我的稳定分支(https://mydomain.co)的故事书静态，它工作的很好，但我也通过我的CI在每个拉请求上部署预览环境。

每个拉请求的上传都是“动态”的，意思是我删除了分支的名称，最后构建并将故事书静态上传到这个模式：https://mydomain.co/preview/{slugified-branch-name}。

问题所在

我面临的问题是，在故事书生成的iframe.html中，我们可以找到以下内容：

<script type="module" crossorigin src="/assets/iframe.1767e7d6.js"></script>
<link rel="stylesheet" href="/assets/iframe.4ea3770b.css">

在我的apache服务器上，这将解析为https://mydomain.co/assets/iframe.x，考虑到这一点，故事书实例将无法找到它，最后我将有一个没完没了的加载循环。

无趣的解决办法

当我连接ssh并在/前面删除前面的斜杠assets时，故事书实例就可以顺利地交付了。

今天，为了实现自动化，我在我的CI中有了一个棘手的解决方案。构建后，我将使用sed删除该斜杠。

通过童话配置？

但是，我想知道你们中是否有人有一个解决方案直接用故事书配置本身来解决这个问题，并且让我的包输出src，而没有前面的斜杠在我的iframe.html中结束这个问题。

<script type="module" crossorigin src="assets/iframe.1767e7d6.js"></script>
<link rel="stylesheet" href="assets/iframe.4ea3770b.css">

提前感谢

Answer 1

在你的.故事书/主目录中。(ts\js)：

导入mergeConfig

• add
• viteFinal方法

​

import { mergeConfig } from "vite";

export default {
  // ...
  async viteFinal(config, options) {
        return mergeConfig(config, {
          base: "./",
        });
  },
};

​

viteFinal用于将项目级别的vite.config.js与故事书使用的vite.config.js合并。

在当前情况下，这段代码将在构建时将基本路径从绝对路径更改为相对路径。这将有助于解决您的问题，并帮助您的web服务器正确解决资产路径。

参考资料：https://vitejs.dev/config/shared-options.html#base