aspnetcore vueclimiddleware DOWNLOAD - aspnetcore vueclimiddleware -Quellcode Download

aspnetcore vueclimiddleware

Andere Kategorien

5.0.0

Herunterladen

VueClimiddleware - Unterstützung von Vue CLI und Quasar CLI

Dies ist ein eigenständiges Modul, mit dem ASPNET-Kern Vue CLI und Quasar CLI-Unterstützung hinzufügt.

Siehe Beispiele hier: https://github.com/eeeparker/aspnetcore-vueclimiddleware/tree/master/samples

ASP.NET 3.x Endpoint Routing

Stellen Sie zunächst unbedingt die Vue -CLI- oder Quasar -CLI auf die Ausgabe von Verteilungsdateien auf wwwroot direkt (nicht dist) um.

Quasar Cli: Regex: "erfolgreich zusammengestellt"
Vue CLI: Regex: "erfolgreich zusammengestellt" oder "Running at" oder "Start Development Server" je nach Version

Der Grund für Starting development server , der NPM-Skript, der überprüft wird: Obwohl der Dev-Server uns irgendwann die URL mitteilt, die er anhört, ist dies erst dann, bis er fertig ist, und selbst dann nur, wenn keine Compiler-Warnungen vorhanden sind. Anstatt darauf zu warten, betrachten Sie es bereit, sobald es nach Anfragen zu hören beginnt. Sehen Sie sich die Codes an.

Konfigurationsoptionen

Wenn Sie die MapToVueCliProxy oder UseVueCli verwenden, können Sie das Verhalten basierend auf Ihrem NPM -Skriptläufer oder Compiler anpassen.

Parameter	Typ	Beschreibung	Standard
`npmScript`	Saite	Der Name des Skripts in Ihrer Paket.json-Datei, mit der Vue-Cli, Quasar CLI oder andere Webserver gestartet werden.
`spaOptions`	Spaoptionen	Stellen Sie den Ordner der App so ein, dass sie ausgerichtet sind.
`port`	int	Geben Sie die VUE CLI Server -Portnummer an. Dies wird auch von der Force-Kill-Option verwendet, um Prozesse mithilfe des Ports zu ermitteln.	8080
`https`	bool	Stellen Sie den Proxy fest, um HTTPS zu verwenden	FALSCH
`runner`	`enum { Npm, Yarn }`	Geben Sie den Läufer, NPM und Garn an, die gültigen Optionen sind. Garnunterstützung ist experimentell.	NPM
`regex`	Saite	Wichtiger Text für die Suche im NPM -Protokoll, das angibt, dass Webserver ausgeführt wird. Dies muss für Vue-Cli, Quasar und Quasar V2 festgelegt werden . (zB `running at` , `READY` , `APP Url` )	`running at`
`forceKill`	bool	Versuchen Sie, den NPM -Prozess zu töten, wenn Sie das Debuggen beenden.	FALSCH
`wsl`	bool	Setzen Sie auf True, wenn Sie WSL unter Windows verwenden. Für andere Betriebssysteme wird es ignoriert. Dies ändert den ausgeführten Prozessnamen in `wsl` anstelle von `cmd` .	FALSCH

Siehe migrierende ASP.NET 2.2 bis 3.0 Endpoint Routing

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

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

Möglicherweise müssen Sie Ihre CSProj -Datei auch die folgenden Aufgaben hinzufügen. Dies ähnelt dem, was in den Standard -AspNetspa -Vorlagen zu finden ist.

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