4

我们是 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 实现我们所需要的，或者这是我们无法在运行时配置的东西。谢谢阅读！

4

4 回答 4

2

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

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

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

于 2019-05-05T20:16:33.033 回答
1

我们的 webapp 也遇到了类似的问题。顺便说一句，我们为 vue 实现了一个 CDN 插件。

export const CDNPlugin = {
  install(Vue, { CDN, assetsManifest }) {
    Vue.prototype.$cdn = {
      ...CDN,
      asset(name) {
        return `${CDN.baseUrl}${assetsManifest[name]}`;
      },
      resource(filepath) {
        return `${CDN.baseUrl}/resources/${filepath}`;
      }
    };
  }
};

在你的 ssr 和 csr 文件中安装这个插件。

Vue.use(CDNPlugin, {
  CDN: { baseUrl: 'https://my.static.cdn.com' },
  assetsManifest: yourAssetManifestObject,
});

这个CDN插件在vue模板中的用法如下

<img :src="$cdn.asset('relative/path/to/asset/style.css')">

如果您认为它有点帮助，那么我可以分享更多关于我们实施的信息。

于 2020-05-20T19:58:34.467 回答
0

我的项目中也出现了类似的问题，最后我解决了。

瑞安的回答确实有帮助，但我想澄清一件事。__webpack_public_path__是 webpack 捆绑代码中的 LOCAL 变量，意思__webpack_public_path__和global.__webpack_public_path__不一样。你需要做类似的事情

__webpack_public_path__ = process.env.ASSET_PATH;

指定公共路径（https://webpack.js.org/guides/public-path/#on-the-fly仅供参考）。

最后，请确保你process.env.ASSET_PATH的不是未定义的，也许你必须global在你的服务器代码中手动设置它。

global.process.env.ASSET_PATH = process.env.ASSET_PATH;
于 2020-09-28T09:17:26.283 回答
0

我花了一整天的时间试图弄清楚这一点。最后我用了这个：

https://github.com/agoldis/webpack-require-from

像魅力一样工作，客户端和服务器。请注意，您需要在节点/服务器的某个地方设置一个 global.MY_BASE_URL，并且您需要在 HTML 的某个地方注入一个 window.MY_BASE_URL。然后只需配置 webpack。

plugins.push(new WebpackRequireFrom({variableName: 'MY_BASE_URL'}));

于 2019-10-03T15:59:30.230 回答