在用于 CDN 的 vue 应用程序中保持资产和公共路径不同
Posted
技术标签:
【中文标题】在用于 CDN 的 vue 应用程序中保持资产和公共路径不同【英文标题】:Keeping asset and public path different in vue app for CDN 【发布时间】:2020-07-15 00:39:48 【问题描述】:vue 有这个选项 publicPath
允许将应用程序部署在子路径上: foobar.com/my-path ,使链接和每个资产都可以通过它访问。
从性能的角度来看,我想在我的应用程序资产上启用 CDN。如何将 URL 专门用于资产(而不是超链接)?
示例:
./my-path/assets/app.js
应该变成 https://my-staging-cdn.com/my-path/assets/app.js
./my-path/url-2.html
应该保持不变
下面的配置允许我设置路径和资产目录,但无法弄清楚如何为资产设置 cdn URL
module.exports =
publicPath: ‘/my-path/‘,
assetsDir: 'assets'
不能这样做:
publicPath: process.env.NODE_ENV === 'production' ? 'https://my-staging-cdn.com/my-path' : '/my-path/'
,因为它也会更改应用程序链接中的 URL。
【问题讨论】:
【参考方案1】:无法使 CDN 正常工作或资产开箱即用。我尝试了其他策略,例如预渲染或 Nuxt,但由于页面数量巨大,无法选择。
目标是让 SEO 机器人读取呈现的页面,所以我在 Rendertron 上圈出并部署了它的实例并将它放在应用程序后面的反向代理中。这行得通。
【讨论】:
以上是关于在用于 CDN 的 vue 应用程序中保持资产和公共路径不同的主要内容,如果未能解决你的问题,请参考以下文章
ini MODX Cloud中的Web规则(nginx conf),用于CDN,代理缓存资产和statcache
ini MODX Cloud中的Web规则(nginx conf),用于CDN,代理缓存资产和statcache
道具被变异(在 django 模板和带有 CDN 的 Vue.js 中)