在CDN的Vue App中保持资产和公共路径不同 [英] Keeping asset and public path different in vue app for CDN

问题描述

vue具有此选项 publicPath ，可将应用程序部署在子路径上: foobar.com/my-path ，通过它可以访问链接和所有资产.

vue has this option publicPath which lets an app to be deployed on subpath: foobar.com/my-path , making links and every asset accessible via it.

从性能的角度来看，我想在我的应用程序资产上启用CDN.如何才能将URL专用于资产(而不是超链接)?

From performance standpoint, I want to enable CDN on my application's assets. How can I use the URL specifically for assets (and not the hyperlinks)?

示例: ./my-path/assets/app.js应该成为https://my-staging-cdn.com/my-path/assets/app.js
./my-path/url-2.html应该保持不变

Example: ./my-path/assets/app.js should become https://my-staging-cdn.com/my-path/assets/app.js
./my-path/url-2.html should remain the same

以下配置允许我设置路径和资产目录，但无法弄清楚如何为资产设置CDN URL

The configuration below allows me to set the path and assets directory, but not able to figure out how to set cdn URL for assets

module.exports = {
  publicPath: ‘/my-path/‘,
  assetsDir: 'assets'
}

无法执行: publicPath: process.env.NODE_ENV === 'production' ? 'https://my-staging-cdn.com/my-path' : '/my-path/'，因为它也会更改应用程序链接中的URL.

Cannot do: publicPath: process.env.NODE_ENV === 'production' ? 'https://my-staging-cdn.com/my-path' : '/my-path/', as it will change the URL in application's links too.

推荐答案

无法立即使用CDN或资产.我尝试了其他策略，例如预渲染或Nuxt，但由于页面数量巨大，因此无法选择.

Wasn't able to get the CDN working or assets out of the box. I tried other strategies like pre-rendering or Nuxt, but because of huge number of pages, it wasn't an option.

目标是让SEO机器人阅读呈现的页面，所以我在 Rendertron 上盘旋部署它的实例，并将其放在应用程序后面的我的反向代理中.这行得通.

The objective was to get SEO bots to read rendered page, so I circled out on Rendertron and deployed it's instance and put it in my reverse proxy behind the application. This worked.

这篇关于在CDN的Vue App中保持资产和公共路径不同的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！