Download aspnetcore vueclimiddleware - aspnetcore vueclimiddleware kode sumber kode

aspnetcore vueclimiddleware

Kategori lainnya

5.0.0

Unduh

Vueclimiddleware - Pendukung Vue Cli dan Quasar Cli

Ini adalah modul yang berdiri sendiri untuk menambahkan dukungan Vue Cli dan Quasar CLI ke ASPNET Core.

Lihat contoh di sini: https://github.com/eeparker/aspnetcore-vueclimiddleware/tree/master/samples

ASP.NET 3.x Routing titik akhir

Pertama, pastikan untuk beralih Vue CLI atau Quasar CLI ke file distribusi output ke wwwroot secara langsung (bukan Dist).

Quasar CLI: Regex: "Disusun dengan sukses"
Vue cli: regex: "disusun dengan sukses" atau "berjalan di" atau "memulai server pengembangan" tergantung pada versi

Alasan untuk Starting development server , npm-script menjalankan pos pemeriksaan: Meskipun server dev pada akhirnya dapat memberi tahu kami URL yang didengarkan, itu tidak terjadi sampai selesai dikompilasi, dan bahkan hanya jika tidak ada peringatan kompiler. Jadi alih -alih menunggu itu, pertimbangkan itu siap segera setelah mulai mendengarkan permintaan.

Opsi Konfigurasi

Saat menggunakan MapToVueCliProxy atau UseVueCli Anda dapat menyesuaikan perilaku berdasarkan pelari atau kompiler skrip NPM Anda.

Parameter	Jenis	Keterangan	Bawaan
`npmScript`	rangkaian	Nama skrip dalam file package.json Anda yang meluncurkan vue-cli, quasar CLI atau server web lainnya.
`spaOptions`	Spaopsi	Atur folder aplikasi untuk diproksi.
`port`	int	Tentukan nomor port server Vue CLI. Ini juga digunakan oleh opsi force-kill untuk menemukan proses yang menggunakan port.	8080
`https`	bool	Atur proxy untuk menggunakan https	PALSU
`runner`	`enum { Npm, Yarn }`	Tentukan runner, NPM dan benang adalah opsi yang valid. Dukungan benang bersifat eksperimental.	NPM
`regex`	rangkaian	Teks penting untuk dicari dalam log NPM yang menunjukkan server web sedang berjalan. Ini harus ditetapkan untuk Vue-Cli, Quasar dan Quasar V2. (misalnya `running at` , `READY` , `APP Url` )	`running at`
`forceKill`	bool	Cobalah untuk membunuh proses NPM saat menghentikan debugging.	PALSU
`wsl`	bool	Setel ke True jika Anda menggunakan WSL di Windows. Untuk sistem operasi lainnya itu akan diabaikan. Ini mengubah nama proses yang dieksekusi ke `wsl` alih -alih `cmd` .	PALSU

Lihat Migrasi ASP.NET 2.2 ke 3.0 Routing titik akhir

    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 Contoh Penggunaan

    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
            } ) ;
        }
    }

Konfigurasi CSPROJ

Anda mungkin juga perlu menambahkan tugas -tugas berikut ke file csproj Anda. Ini mirip dengan apa yang ditemukan dalam template ASPNETSPA default.

  < 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 >