aspnetcore vueclimiddleware
5.0.0
Vue CLI 및 Quasar CLI 지원을 ASPNET Core에 추가하는 독립형 모듈입니다.
https://github.com/eeparker/aspnetcore-vueclimiddleware/tree/master/samples를 참조하십시오
먼저 Vue CLI 또는 Quasar CLI를 전환하여 배포 파일을 WWWROOT로 직접 출력하십시오 (DIST가 아님).
NPM 스크립트 실행 체크 포인트 인
Starting development server이유 : Dev 서버는 결국 듣고있는 URL을 알려주지 만 컴파일이 완료 될 때까지는 그렇지 않으며 컴파일러 경고가없는 경우에만 해당됩니다. 따라서 기다리는 대신 요청을 듣기 시작하자마자 준비하는 것을 고려하십시오. 코드 참조
MapToVueCliProxy 또는 UseVueCli 사용하는 경우 NPM 스크립트 러너 또는 컴파일러를 기반으로 동작을 사용자 정의 할 수 있습니다.
| 매개 변수 | 유형 | 설명 | 기본 |
|---|---|---|---|
npmScript | 끈 | Vue-Cli, Quasar CLI 또는 기타 웹 서버를 시작하는 Package.json 파일의 스크립트 이름. | |
spaOptions | Spaoptions | 앱의 폴더를 프록시로 설정하십시오. | |
port | int | VUE CLI 서버 포트 번호를 지정하십시오. 이것은 포트를 사용하는 프로세스를 검색하기 위해 Force-Kill 옵션에 의해 사용됩니다. | 8080 |
https | 부 | https를 사용하도록 프록시를 설정하십시오 | 거짓 |
runner | enum { Npm, Yarn } | 러너, NPM 및 원사는 유효한 옵션입니다. 원사 지지대는 실험적입니다. | NPM |
regex | 끈 | NPM 로그에서 검색 할 중요한 텍스트 웹 서버가 실행 중임을 나타냅니다. Vue-Cli, Quasar 및 Quasar V2 용으로 설정해야합니다 . (예 : running at , READY , APP Url ) | running at |
forceKill | 부 | 디버깅을 중지 할 때 NPM 프로세스를 죽이려고 시도하십시오. | 거짓 |
wsl | 부 | Windows에서 WSL을 사용하는 경우 True로 설정하십시오. 다른 운영 체제의 경우 무시됩니다. 이는 실행 된 프로세스 이름을 cmd 대신 wsl 로 변경합니다. | 거짓 |
마이그레이션 ASP.NET 2.2 ~ 3.0 엔드 포인트 라우팅을 참조하십시오
public class Startup {
public Startup ( IConfiguration configuration )
{
Configuration = configuration ;
}
public IConfiguration Configuration { get ; }
// This method gets called by the runtime. Use this method to add services to the container.
public void ConfigureServices ( IServiceCollection services )
{
// NOTE: PRODUCTION Ensure this is the same path that is specified in your webpack output
services . AddSpaStaticFiles ( opt => opt . RootPath = "ClientApp/dist" ) ;
services . AddControllers ( ) ;
}
// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
public void Configure ( IApplicationBuilder app , IWebHostEnvironment env )
{
// optional base path for IIS virtual app/directory
app . UsePathBase ( "/optionalpath" ) ;
// PRODUCTION uses webpack static files
app . UseSpaStaticFiles ( ) ;
// Routing
app . UseRouting ( ) ;
app . UserAuthorization ( ) ;
app . UseEndpoints ( endpoints =>
{
endpoints . MapControllers ( ) ;
endpoints . MapToVueCliProxy (
"{*path}" ,
new SpaOptions { SourcePath = "ClientApp" } ,
npmScript : ( System . Diagnostics . Debugger . IsAttached ) ? "serve" : null ,
regex : "Compiled successfully" ,
forceKill : true ,
wsl : false // Set to true if you are using WSL on windows. For other operating systems it will be ignored
) ;
} ) ;
}
} using VueCliMiddleware ;
public class Startup
{
public Startup ( IConfiguration configuration )
{
Configuration = configuration ;
}
public IConfiguration Configuration { get ; }
public virtual void ConfigureServices ( IServiceCollection services )
{
services . AddMvc ( ) ; // etc
// Need to register ISpaStaticFileProvider for UseSpaStaticFiles middleware to work
services . AddSpaStaticFiles ( configuration => { configuration . RootPath = "ClientApp/dist" ; } ) ;
}
public virtual void Configure ( IApplicationBuilder app , IHostingEnvironment env )
{
// your config opts...
// optional basepath
// app.UsePathBase("/myapp");
// add static files from SPA (/dist)
app . UseSpaStaticFiles ( ) ;
app . UseMvc ( routes => /* configure*/ ) ;
app . UseSpa ( spa =>
{
spa . Options . SourcePath = "ClientApp" ;
#if DEBUG
if ( env . IsDevelopment ( ) )
{
spa . UseVueCli ( npmScript : "serve" , port : 8080 ) ; // optional port
}
#endif
} ) ;
}
} CSPROJ 파일에 다음 작업을 추가해야 할 수도 있습니다. 이것은 기본 Aspnetspa 템플릿에서 발견되는 것과 유사합니다.
< PropertyGroup >
<!-- Typescript/Javascript Client Configuration -->
< SpaRoot >ClientApp</ SpaRoot >
< DefaultItemExcludes >$(DefaultItemExcludes);$(SpaRoot)node_modules**</ DefaultItemExcludes >
</ PropertyGroup >
< Target Name = " DebugEnsureNodeEnv " BeforeTargets = " Build " >
<!-- Build Target: Ensure Node.js is installed -->
< Exec Command = " node --version " ContinueOnError = " true " >
< Output TaskParameter = " ExitCode " PropertyName = " ErrorCode " />
</ Exec >
< Error Condition = " '$(ErrorCode)' != '0' " Text = " Node.js is required to build and run this project. To continue, please install Node.js from https://nodejs.org/, and then restart your command prompt or IDE. " />
</ Target >
< Target Name = " DebugEnsureNpm " AfterTargets = " DebugEnsureNodeEnv " >
<!-- Build Target: Ensure Node.js is installed -->
< Exec Command = " npm --version " ContinueOnError = " true " >
< Output TaskParameter = " ExitCode " PropertyName = " ErrorCode " />
</ Exec >
</ Target >
< Target Name = " EnsureNodeModulesInstalled " BeforeTargets = " Build " Inputs = " package.json " Outputs = " packages-lock.json " >
<!-- Build Target: Restore NPM packages using npm -->
< Message Importance = " high " Text = " Restoring dependencies using 'npm'. This may take several minutes... " />
< Exec WorkingDirectory = " $(SpaRoot) " Command = " npm install " />
</ Target >
< Target Name = " PublishRunWebpack " AfterTargets = " ComputeFilesToPublish " >
<!-- Build Target: Run webpack dist build -->
< Message Importance = " high " Text = " Running npm build... " />
< Exec WorkingDirectory = " $(SpaRoot) " Command = " npm run build " />
<!-- Include the newly-built files in the publish output -->
< ItemGroup >
< DistFiles Include = " $(SpaRoot)dist** " />
< ResolvedFileToPublish Include = " @(DistFiles->'%(FullPath)') " Exclude = " @(ResolvedFileToPublish) " >
< RelativePath >%(DistFiles.Identity)</ RelativePath >
< CopyToPublishDirectory >PreserveNewest</ CopyToPublishDirectory >
</ ResolvedFileToPublish >
</ ItemGroup >
</ Target >
여기서 논의로 인해 Microsoft 소유 패키지에 포함되지 않기로 결정했습니다.
