찾다

 >  Q&A  >  본문

webpack을 사용하여 AngularJS와 Vue.js를 하나의 애플리케이션으로 구축하시겠습니까?

좀 복잡해 보일 수도 있고 "그렇게 하지 말고 이렇게 하세요"라고 대답할 수도 있으니 제가 하고 있는 일의 배경부터 시작하겠습니다. 기본적으로 Vue에서 Vue로 마이그레이션하려는 레거시 AngularJS 애플리케이션이 있습니다. 우리는 애플리케이션을 처음부터 끝까지 다시 작성할 수 있는 옵션이 없었고 완전한 기능을 갖춘 애플리케이션을 제공하면서 하나씩 다시 작성해야 했습니다.

전체적인 목표는 두 프레임워크를 동시에 실행하는 것입니다. 라우팅으로 뭔가를 할 수 있거나 단일 페이지 앱을 다른 프레임워크에 대해 두 개의 별도 페이지로 나눌 수 있기를 바랍니다. 저는 이것이 Vue를 실행하는 논리적인 첫 번째 단계라고 생각했기 때문에 Gulp 빌드 파이프라인을 사용하는 것에서 Webpack을 사용하는 것으로 Anglejs를 전환했지만 이제 장애물에 부딪혔습니다.

내가 각도 앱을 만드는 데 사용하는 webpack.config.js는 다음과 같습니다.

으아아아

이제 잘 작동하고 이전처럼 작동하는 엔딩을 추가할 수 있는 항목이 생겼습니다.

그런 다음 /source/vueJs 디렉터리를 추가하고 vue create hello-world 생성된 hello world 프로젝트의 내용을 복사하여 붙여넣었습니다. 내 가설은 /source/vueJs 目录,并复制并粘贴了 vue create hello-world 生成的内容 hello world 项目。我的假设是,如果我可以修改我的 webpack.config.js를 수정하여 빌드할 수 있다면 추가로 반복하여 두 개의 작동 중인 앱을 병합하는 지점에 도달할 수 있다는 것입니다. 하지만 이미 hello-world vue 프로젝트에서 무엇이든 생성하도록 하는 데 어려움을 겪고 있습니다. 물건.

지금까지 기본적으로 모든 관련 angleJS 부분을 주석 처리하고 vue 앱을 빌드하는 데 옳다고 생각하는 부분을 추가했습니다. 이제 다음과 같은 결과가 나왔습니다.

으아아아

이것은 잘 작동하고 distribution/ 目录,其中包含我的资产,但是所提供的站点运行起来就像根本没有运行 JavaScript 一样。比较我的版本上 npx webpack 的输出和 hello-world 项目上 npx vue-cli-service build 출력을 얻습니다. 자바스크립트는 비슷하지만 많은 핵심 영역에서 다릅니다. 처음에는 내 버전에 hello world 프로젝트처럼 HTML이 포함되지 않은 것처럼 보였습니다.

webpack에서 vue 앱을 컴파일하려고 하면 실패하나요? vue-cli-service build를 통해서만 할 수 있으니 vue로만 제한되나요? https://cli.vuejs.org/guide/webpack.html 및 https://cli.vuejs.org/config/에 있는 정보를 사용하여 vue.config.js를 수정하려고 시도했지만 솔직히 '나는' 현재의 깊이에서 벗어났고 내가 하고 있는 일이 좋은 생각인지 확신할 수 없습니다.

최종 목표를 달성하기 위한 더 좋은 전략이 있나요? 이것이 실행 가능한 솔루션이라면 Anglejs 및 vue 앱을 올바르게 빌드하려면 어떤 구성을 변경해야 합니까?

P粉301523298P粉301523298274일 전367

모든 응답(1)나는 대답할 것이다

  • P粉511896716

    P粉5118967162024-03-30 00:07:31

    나무만 보고 숲을 볼 수 없습니다. 문제는 제공된 스크립트가 포함되어 있지만 본문에 내용이 없는 webpack.config.js 没有成功生成工作的 Angular 和 Vue 组合应用程序,问题在于我没有提供实际使用的模板< /em> 其中任何一个,因此它只会生成一个空白的 index.html 에 있는 것이 아닙니다.

    변화

    으아악

    제 질문에는 AnularJS 구성 요소와 Vue 구성 요소를 모두 사용하여 제대로 작동하는 템플릿이 있었습니다.

    회신하다
    0
  • 취소회신하다