gpt4 book ai didi

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

转载 作者:搜寻专家 更新时间:2023-10-30 22:28:14 25 4
gpt4 key购买 nike

我们很高兴成为 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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com