Téléchargement aspnetcore vueclimiddleware - Téléchargement du code source aspnetcore vueclimiddleware

aspnetcore vueclimiddleware

Autres catégories

5.0.0

Télécharger

VueClimiddleware - Soutenir Vue CLI et Quasar CLI

Il s'agit d'un module autonome pour ajouter la prise en charge de Vue CLI et quasar CLI au noyau Aspnet.

Voir les exemples ici: https://github.com/eeparker/aspnetcore-vueclimiddleware/tree/master/samples

ASP.NET 3.x Route de point de terminaison

Tout d'abord, assurez-vous de basculer Vue CLI ou Quasar CLI pour sortir des fichiers de distribution directement sur wwwroot (pas DIST).

Quasar CLI: Regex: "Compilé avec succès"
Vue CLI: Regex: "compilé avec succès" ou "exécuter" ou "Démarrage du serveur de développement" en fonction de la version

La raison du Starting development server , le NPM-Script exécutant le point de contrôle: bien que le serveur de développement puisse éventuellement nous dire l'URL qu'il écoute, il ne le fait pas jusqu'à ce qu'il soit terminé la compilation, et même alors, seulement s'il n'y avait pas de l'avertissement du compilateur. Donc, au lieu d'attendre cela, considérez-le prêt dès qu'il commence à écouter les demandes.

Options de configuration

Lorsque vous utilisez le MapToVueCliProxy ou UseVueCli vous pouvez personnaliser le comportement en fonction de votre coureur de script NPM ou compilateur.

Paramètre	Taper	Description	Défaut
`npmScript`	chaîne	Le nom du script dans votre fichier package.json qui lance le VUE-CLI, Quasar CLI ou autre serveur Web.
`spaOptions`	Spaoptions	Définissez le dossier de l'application à proxie.
`port`	int	Spécifiez le numéro de port Vue CLI Server. Ceci est également utilisé par l'option Force-Kill pour découvrir des processus en utilisant le port.	8080
`https`	bool	Définir le proxy pour utiliser HTTPS	FAUX
`runner`	`enum { Npm, Yarn }`	Spécifiez le coureur, le NPM et le fil sont des options valides. Le support du fil est expérimental.	NPM
`regex`	chaîne	Texte important à rechercher dans le journal NPM qui indique que le serveur Web est en cours d'exécution. Cela doit être défini pour Vue-Cli, Quasar et Quasar V2. (par exemple, `running at` , `READY` , `APP Url` )	`running at`
`forceKill`	bool	Essayez de tuer le processus NPM lors de l'arrêt du débogage.	FAUX
`wsl`	bool	Définissez TRUE si vous utilisez WSL sur Windows. Pour d'autres systèmes d'exploitation, il sera ignoré. Cela modifie le nom du processus exécuté en `wsl` au lieu de `cmd` .	FAUX

Voir Migration ASP.NET 2.2 vers 3.0 Route de point final

    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 Exemple d'utilisation

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

Configuration CSPROJ

Vous devrez peut-être également ajouter les tâches suivantes à votre fichier CSPROJ. Ceci est similaire à ce qui se trouve dans les modèles ASPNETSPA par défaut.

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