저는 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 구성을 변경하여 이를 달성할 수 있습니까?
P粉1557104252024-01-17 00:08:10
드디어 이 문제를 해결했습니다. 문제는 다음 라우터 초기화 코드로 인해 발생합니다:
으아악더 이상 필요하지 않기 때문에 createWebHistory函数的参数，我就能够在vue.config.js中设置publicPath选项为我的CloudFront分发URL，一切开始正常工作。我甚至能够移除我自己的脚本，它在index.blade.php변경 URL을 제거했습니다.