CDN을 사용하여 Vue JS용 지연 로딩 블록을 제공하는 방법을 알아보세요.
저는 Vue.js 3으로 작성되고 Vue CLI 5(Webpack 5)로 구축된 단일 페이지 애플리케이션을 개발 중입니다. 애플리케이션은 AWS에 배포된 Laravel 애플리케이션에 의해 제공되며 배포 도구는 Laravel Vapor입니다. 또한 이 도구는 모든 정적 리소스(JS 청크 포함)를 AWS S3에 업로드하고 CloudFront를 통해 액세스를 제공합니다.
Vue.js 애플리케이션에 사용되는 모든 정적 리소스를 CDN에서 로드하고 싶습니다. CloudFront에서 배포한 ASSET_URL环境变量中获得。我已经在TS和SCSS中编写了自己的asset函数，能够正确解析本地开发和生产环境的资源路径。每当我在.scss或.vue 파일의 정적 리소스(이미지, 글꼴 등)에 대한 URL을 작성할 때 이 기능을 사용했는데 모든 것이 잘 작동했습니다.
그러나 Vue.js 앱을 사용하여 CDN에서 JS 청크를 로드할 수 없습니다. vue.config.js에서 publicPath 옵션을 수정하면 Vue Router에 문제가 있습니다. Webpack 구성에서 output.publicPath를 직접 변경하려고 하면 Vue CLI에서 직접 수정할 수 없다는 오류가 발생합니다.
그래서 생성된 index.blade.php文件中指向静态资源的所有URL（类似于典型Vue.js项目中的index.html），现在初始JS块从CDN加载。然而，所有延迟加载的块仍然从部署Laravel应用程序的服务器加载。看起来这些路径在生成的app.f73fadef.js 파일의 정의를 다시 작성하는 스크립트를 작성했습니다.
제 질문은 동적 웹 서버에서 애플리케이션을 제공하는 동안 CDN에서 모든 정적 리소스(JS 청크 포함)를 어떻게 로드합니까?입니다. 생성된 JS 파일을 수정하는 것과 같은 "블랙 트릭"을 수행하지 않고 Vue CLI 또는 Webpack 구성을 변경하여 이를 달성할 수 있습니까?
