aspnetcore vueclimiddleware

Vueclimiddleware - รองรับ Vue CLI และ Quasar CLI

นี่คือโมดูลแบบสแตนด์อโลนเพื่อเพิ่ม Vue CLI และ Quasar CLI รองรับ Aspnet Core

ดูตัวอย่างที่นี่: https://github.com/eeparker/aspnetcore-vueclimiddleware/tree/master/samples

การกำหนดเส้นทางปลายทาง ASP.NET 3.x

ก่อนอื่นให้แน่ใจว่าได้เปลี่ยน Vue CLI หรือ Quasar CLI เป็นไฟล์แจกจ่ายเอาต์พุตเป็น wwwroot โดยตรง (ไม่ใช่ dist)

• Quasar CLI: regex: "รวบรวมสำเร็จ"
• Vue CLI: Regex: "รวบรวมสำเร็จ" หรือ "Running At" หรือ "Start Development Server" ขึ้นอยู่กับเวอร์ชัน

เหตุผลใน Starting development server จุดตรวจสอบ NPM-Script: แม้ว่าในที่สุดเซิร์ฟเวอร์ DEV อาจบอกเราว่า URL กำลังฟังอยู่ในที่สุดก็ไม่ได้ทำจนกว่าจะเสร็จสิ้นการรวบรวมและแม้กระทั่งเมื่อไม่มีคำเตือนคอมไพเลอร์ ดังนั้นแทนที่จะรอสิ่งนั้นให้พิจารณาพร้อมทันทีที่เริ่มฟังคำขอดูรหัส

ตัวเลือกการกำหนดค่า

เมื่อใช้ MapToVueCliProxy หรือ UseVueCli คุณสามารถปรับแต่งพฤติกรรมตามนักวิ่งสคริปต์ NPM หรือคอมไพเลอร์ของคุณ

พารามิเตอร์	พิมพ์	คำอธิบาย	ค่าเริ่มต้น
npmScript	สาย	ชื่อของสคริปต์ในไฟล์ package.json ของคุณที่เปิดใช้งาน Vue-Cli, Quasar CLI หรือเว็บเซิร์ฟเวอร์อื่น ๆ
spaOptions	การสปาพี	ตั้งค่าโฟลเดอร์ของแอพที่จะเป็นพร็อกซี
port	int	ระบุหมายเลขพอร์ต Vue CLI Server สิ่งนี้ยังใช้โดยตัวเลือกการฆ่าแบบบังคับเพื่อค้นหากระบวนการที่ใช้พอร์ต	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	บูล	ตั้งค่าเป็นจริงหากคุณใช้ WSL บน Windows สำหรับระบบปฏิบัติการอื่น ๆ มันจะถูกละเว้น สิ่งนี้จะเปลี่ยนชื่อกระบวนการที่ดำเนินการเป็น wsl แทน cmd	เท็จ

ดูการเคลื่อนย้าย 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
                    ) ;
            } ) ;
        }
    } 

asp.net 2.2 ตัวอย่างการใช้งาน

    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

คุณอาจต้องเพิ่มงานต่อไปนี้ในไฟล์ 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