我们很高兴成为 Vue 及其服务器端渲染模块 Vue SSR 的用户。我的项目的一个要求是我们能够在运行时动态调整 Webpack 的 publicPath，这样我们就可以从我们不同的 CDN 获取 Assets (我们有两个，一个用于测试，一个用于生产)。
我们可以使用 __webpack_public_path__ free variable 在客户端轻松完成此操作，您还可以覆盖 publicPath within the SSR client manifest对于注入(inject)到 <head> 中的 Assets URL .
然而，我们仍然对直接位于模板中并由 SSR 呈现的 Assets 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 实现我们需要的东西，或者这是我们无法在运行时配置的东西。感谢阅读!
最佳答案
这里跟进较晚，但我们最终解决了这个问题。
我们发现在我们的 Node.js 进程中全局设置 __webpack_public_path__ 确实会导致将正确的公共(public)路径应用于我们服务器包中的 Assets 。
一旦该全局出现在窗口(例如客户端)和全局节点进程(例如服务器端)中，事情就开始按我们想要的方式进行。
关于vue.js - 使用 Vue SSR 渲染页面时的动态 publicPath，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52303915/