时间戳

首页 > 解决方案 > 使用 Vue SSR 渲染页面时的动态 publicPath

vue.js - 使用 Vue SSR 渲染页面时的动态 publicPath

问题描述

我们是 Vue 及其服务器端渲染模块 Vue SSR 的快乐用户。我的项目的需求之一是我们能够在运行时动态调整 Webpack 的 publicPath，这样我们就可以从我们不同的 CDN 中获取资产（我们有两个，一个用于测试，一个用于生产）。

__webpack_public_path__我们可以使用自由变量在客户端轻松完成此操作，您还可以覆盖SSR 客户端清单中的 publicPath 以将资产 URL 注入<head>.

然而，我们仍然存在直接位于我们的模板中并由 SSR 呈现的资产 URL 的问题。例如，假设我们的标签中有以下图像：

<img src="~@/test.png" />

我们的目标是，在服务器和客户端上，我们都可以通过 publicPath 调整该 URL 以添加我们喜欢的前缀。似乎没有一种方法可以vue-ssr-server-manifest.json在生成 publicPath 后动态更新它，最终的 URL 最终会是相对的，/static/test.png或者我们最初在 Webpack 配置中引用的任何东西。

根据我们的项目限制，不可能重建我们的 SSR 包，因此我们需要在运行时执行此操作。我们尝试添加占位符值作为我们的 publicPath，例如__CUSTOM_WEBPACK_PUBLIC_PATH__，并在运行时在服务器包中替换它们，但这最终无效，因为 publicPath 也嵌入在其他 Webpack 生成的文件中。

想知道是否有一种更简洁的方法可以直接通过 Vue SSR 实现我们所需要的，或者这是我们无法在运行时配置的东西。谢谢阅读！

标签： vue.jswebpackvue-ssr

解决方案

后期跟进，但我们最终解决了这个问题。

我们发现，__webpack_public_path__在我们的 Node.js 进程中进行全局设置确实会导致将正确的公共路径应用于我们服务器包中的资产。

一旦全局出现在窗口（例如客户端）和全局节点进程（例如服务器端）中，事情就开始按照我们的意愿工作。

推荐阅读