webpack 和两个不同的来源网站

Question

我正在使用 webpack。我有两个项目。一种用于前端。一个用于后端。后端也在 javascript 上。所以我将后端与 webpack 捆绑在一起。

捆绑后端后我得到的文件是：

1. main.js
2. test1.js
3. test2.js
4. test1~test2.js

test1，test2和test1~test2.js文件点播块文件。

现在，我正在输入前端网站的 url，（url 是front-end.website.com/test1），当发生这种情况时，我正在下载main.js并test1.js立即执行。之后，我应该点击一个按钮，点击后，axios应该请求 fetch test1~test2.js。正如你所见和我所说的，test1~test2.js应该延迟加载，这就是发生的事情，但是.....

问题：当请求test1~test2.js发生时，请求不会发送到后端源，而是前端源，这会导致文件无法加载，因为前端不存在该文件。看起来像main.js，有一个延迟加载的代码，test1~test2.js但它没有完整的原始路径，当前端尝试加载它时，它认为它应该从自身加载。

我该如何解决？

解决方法（但我讨厌这个）：我尝试在后端的 webpack 配置中使用 publicPath，例如：https://back-end.website.com，但这导致的是当请求被发送到后端时，对于哪个文件无关紧要，请求的实际 url 变为https://back-end.website.com/http://back-end.website.com/file（类似的东西）。

Answer 1

这是一个非常不寻常的设置，而不是普通的代码分割。后端生成的文件似乎是 XHR（axios 或其他）的响应，而您尝试执行的实现看起来像是代码分割。

如果按照您的指示获取文件axios，那么您可以将后端 URL 添加到 axios 请求中

const instance = axios.create({
  baseURL: 'https://back-end.website/',
});

axios 不会获取前端文件。在不太可能发生的情况下，创建两个 axios 实例。