ASP에서 Vue를 호스팅합니다.NET Core: 다른 선택

제가 Vue를 개발하고 교수한 몇 년 동안 저는 ASP를 만드는 다양한 방법을 시도했습니다.NET Core와 Vue는 서로 잘 어울린다.나는 사용하는 정책 중 하나 (특히 Angular와React) 가 마이크로소프트의 스파 프레임워크 확장이라고 보았다.Vue는 즉시 사용 가능하거나 템플릿이 있기 때문에 나는 오랫동안 이런 방법을 사용하지 않았다.이제 플랫폼이 성숙되었고 Vue의 오픈 소스 확장이 이루어졌습니다.
나는 내가 다시 가서 보아야 한다고 생각한다.비록 나는 여전히 이것이 정확한 방법이 아니라고 생각한다.왜 그런지 봅시다.

Vue CLI 중간부품 항목 방법

처음에 나는 해결 방법은 단독으로 처리하는 것이라고 생각했다.이것은 VS 코드에서 열거나 명령줄만 사용하여 프로젝트를 실행한다는 것을 의미합니다.나는 더 완전한 것을 원한다. 나는 내가 개의치 않는 해결 방안을 찾았다고 생각한다.
우리 예를 하나 봅시다.Vue CLI 미들웨어 프로젝트https://github.com/EEParker/aspnetcore-vueclimiddleware는 Vue에 특화된 방법을 제공하여 Vue CLI 호스팅 프로젝트(Spa Services를 통해 확장)를 사용하여 신기한 효과를 실현할 수 있다.
GitHub 프로젝트에는 다음과 같은 예가 있습니다.

https://github.com/EEParker/aspnetcore-vueclimiddleware/tree/master/samples/VueCliSample

이 방법의 진정한 문제는 프로젝트가 여러 개가 아닌 단일 페이지 응용 프로그램이 되기를 기대하고, Vue 프로젝트에 사용할 API 호출을 추가하는 것입니다.많은 사람들이 알고 있는 바와 같이, 나는 거대한 Vue 응용 프로그램이 아니라 소량의 응용 프로그램/페이지를 더 좋아한다.
실행할 때 중간부품이 "서브"명령을 실행하고 있습니다. 이 명령은 프로젝트뿐만 아니라 변경 사항을 감시하고 열 모듈을 다시 불러오는 것을 지원합니다.

endpoints.MapToVueCliProxy(
    "{*path}",
    new SpaOptions { SourcePath = "ClientApp" },
    npmScript: (System.Diagnostics.Debugger.IsAttached) ? "serve" : null,
    regex: "Compiled successfully",
    forceKill: true
    );

이것은 가능하지만 마찬가지로 하나의 응용 프로그램만 있다고 가정합니다(그리고 MVC나 Razor 페이지가 아닌 일반 HTML 파일에서 최종 항목을 호스팅한다고 가정합니다).나는 더 많은 유연성을 원한다.
나의 또 다른 관점은 확장을 사용하여 항목을 Vue 프로젝트의/dist 폴더 (깊이 삽입) 로 가리키는 것이다.예를 들어, 폴더를 생성할 위치를 구성할 수 있습니다.

services.AddSpaStaticFiles(opt => opt.RootPath = "ClientApp/dist");

나는 이 항목을 좋아하지만, 그것의 방법을 좋아하지 않는다.우리 나의 변화를 좀 봅시다.

Vue CLI 중간부품 항목 사용: 내 방식

중간부품을 추가하기 전에 먼저 Vue 항목을 약간 변경해야 합니다.첫 번째 변화는 내가 vue를 추가한 것이다.구성Vue 프로젝트의 js 파일입니다.이렇게 하는 유일한 목적은 생성된 출력을 ASP로 바꾸는 것이다.NET 핵심 항목:

module.exports = {
  // Put this in the ASP.NET Core directory
  outputDir: "../wwwroot/app" 
};

또 다른 변화는 프로젝트에 새 스크립트를 추가하는 것이다.json 파일은 개발 모드에서 프로젝트를 구축하고 변경 사항을 관찰할 수 있도록 합니다.

  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "watch": "vue-cli-service build --mode development --watch"
  },

watch 스크립트는 전체 프로젝트 (같은 wwwroot 폴더에서) 를 구축하고 변경될 때마다 재구성합니다.이것은 serve 명령과 유사하지만, 색인만 사용하는 것을 원하지 않습니다.html에서 저희 Vue 프로젝트를 진행하겠습니다.우리가 여러 항목을 사용함에 따라 이 점은 더욱 중요해졌고, 우리는 곧 보게 될 것이다.
대신 참조 가져오기 항목부터 시작합니다.

Vue 프로젝트의 dist 폴더를 가리키기 위해 중간부품을 추가할 필요가 없습니다. 중간부품 끝점만 추가하면 됩니다.

      app.UseEndpoints(endpoints =>
      {
        endpoints.MapRazorPages();
        endpoints.MapControllers();

        // Only do for development
        if (env.IsDevelopment())
        {
          endpoints.MapToVueCliProxy(
            "{*path}",
            new SpaOptions
            {
              SourcePath = "client"
            },
            npmScript: "watch",
            regex: "Compiled successfully",
            forceKill: true
            );
        }
      });

이것은 내가 개발 과정에서middlware만 사용한다는 것을 의미한다.NPMSCcript는 serve가 아닌 새 시계입니다.내가 이렇게 하는 것은 내 페이지에서 Vue 응용 프로그램을 테스트하고 싶어서이다.
예를 들어, 내 예제에서는 색인에 Vue 코드만 배치합니다.cshtml 페이지(Razor 페이지):

@page
@model IndexModel
@{
  ViewData["Title"] = "Home page";
}
@section Scripts {
  <script src="~/app/js/chunk-vendors.js"></script>
  <script src="~/app/js/index.js"></script>
}
<div id="app"></div>

이것은 나에게 내가 원하는 두 개의 물건을 주었다.첫째, Razor Pages(또는 MVC)에서 레이아웃 페이지를 사용하여 레이아웃과 메뉴를 책임집니다(해당하는 경우).이것은 또한 만약에 내가 Vue를 사용하지 않는 페이지에서 프레임(예를 들어 안내)을 사용한다면, 나는 단지 Razor 페이지에 있기 때문에 Vue 보기에서 그것들을 계속 사용할 수 있다는 것을 의미한다.

여러 Vue "페이지" 지원

나도 이런 방법을 좋아한다. 왜냐하면 이것은 내가 단일 Vue 단일 프로젝트를 구축할 뿐만 아니라 Vue CLI를 사용하여 페이지에 대한 지원을 할 수 있도록 격려하기 때문이다.vue 보기.구성js의 페이지 설정:

module.exports = {
  // Put this in the ASP.NET Core directory
  outputDir: "../wwwroot/app",
  pages: {
    index: "src/main.js",
    contact: "src/contact.js"
  }
};

이 예에서 나는 비교적 작고 분리된 Vue 프로젝트를 구축할 수 있도록 두 개의 독립된 Vue 프로젝트를 구축하고 있다.그들은 같은 프로젝트에 있기 때문에 모든 코드를 공유할 수 있다.이렇게 하면 저는 단독 연락처 페이지인 Vue 프로젝트와 연락할 수 있습니다.cshtml contact Vue 항목만 로드:

@page
@model ContactModel
@{
  ViewData["Title"] = "Contact";
}
@section Scripts {
  <script src="~/app/js/chunk-vendors.js"></script>
  <script src="~/app/js/contact.js"></script>
}
<div id="contact"></div>

마지막 생각

중간부품의 작성은 결코 이 점을 고려하지 않았다.나는 색인을 실제로 제공하지 못하도록 요청을 실행할 수도 있다.기본적으로 html을 사용하지 않습니다. 이 파일이 존재하지 않으면 오류가 발생합니다.예를 들어, 페이지가 인덱스로 유지되는지 확인합니다.
당신은 이런 방법이 어떻다고 생각합니까?나는 그것을 좋아한다. 왜냐하면 생산 중에는 중급품이 아예 없기 때문이다.Vue 프로젝트를 위한 Razor Pages(또는 MVC)일 뿐입니다.js 파일.CI 구축 시 Node 및 Vue CLI가 설치되어 있는지 확인하기 위해 구축 스크립트를 수정해야 합니다.내가 보기엔 별거 아니야.
예는 GitHub에서 확인할 수 있습니다.

https://github.com/shawnwildermuth/VueInCore

개선할 수 있는 아이디어가 있습니까?

      This work by [Shawn Wildermuth](http://wildermuth.com) is licensed under a [Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License](http://creativecommons.org/licenses/by-nc-nd/3.0/).  
      Based on a work at [wildermuth.com](http://wildermuth.com).

이 글을 좋아하신다면 Shawn 강의 Pluralsight 를 참조하십시오.