Vue.js/webpack SPA：将所有输出文件指向 CDN，除了 .html？答案

【问题标题】：Vue.js/webpack SPA: point all output files to CDN, except .html?Vue.js/webpack SPA：将所有输出文件指向 CDN，除了 .html？
【发布时间】：2023-04-11 07:11:01
【问题描述】：

对于我的单页应用程序，我想从https://cdn.example.com 的 CDN 部署所有链接文件（JS、CSS、JPG、WOFF 等）。我可以在 webpack 配置中更改publicPath，这会正确设置所有链接。然而，它也让 Vue 路由器认为服务器根是 cdn.example.com 而不仅仅是简单的 example.com。因此，由 Vue Router 处理的主页外的任何链接都指向一个不存在的 cdn 页面。

理想情况下：

index.html（处理所有 Vue 路由）从位于 https://example.com（https://example.com/contact-us、https://example.com/about-us 等）的 Web 服务器提供服务
所有其他内容均来自https://cdn.example.com的 CDN 服务器

可能吗？谢谢。

【问题讨论】：

我假设您正在寻找webpack-cdn-plugin
@Ohgodwhy 我相信这个插件可以让你从 CDN 中提取已知的外部库，就像你想链接到 jQuery 或其他东西一样。我说的是 webpack 本身创建的 JS、CSS 等，文件名像 6.fx147e2e.css 和 runtime.b89y8ya.js

标签： vue.js webpack single-page-application

【解决方案1】：

我的根本误解是 CDN 网络是“愚蠢的”，因为它只是按原样提供静态文件，并且无法执行 Web 服务器的功能，例如强制 SSL 和处理服务器重定向，这对于对单页应用程序。我认为根 index.html 仍然需要从传统的非 CDN Web 服务器提供服务。

所以答案不在于 webpack，答案是找到一个可靠的 CDN 来处理必要的功能并从那里为整个网站提供服务。

【讨论】：

你是怎么做的？您使用了哪个 CDN，您是否使用某种网关 (nginx) 将请求路由到 CDN 托管的静态文件和您的后端/API 实例？
@sbay 由于我们正在构建一个单页应用程序，我们需要路由 www.example.com/page1 和 www.example.com/page2 实际上是由 www.example.com/index.html 提供服务。我错误地认为 CDN 无法管理这种重定向，实际上，大多数都可以轻松处理。设置会因平台而异，但它应该是 CDN 站点配置设置的一部分。 CDN 还应该能够处理诸如将所有 http 流量重定向到 https、修改标头、为不同资产设置不同的缓存时间以及其他可能需要的功能。
@sbay 就后端/API 而言，最好创建一个完全不同的域，例如 api.example.com，并从活动节点/python/Java/php/ 提供服务等服务器（不是 CDN）