aspnetcore vueclimiddleware скачать - aspnetcore vueclimiddleware исходный код скачать

aspnetcore vueclimiddleware

Другие категории

5.0.0

Скачать

Vueclimiddleware - поддержка Vue CLI и Quasar CLI

Это автономный модуль, чтобы добавить Vue CLI и квазарную поддержку CLI в Aspnet Core.

См. Примеры здесь: https://github.com/eparker/aspnetcore-vueclimiddleware/tree/master/samples

Маршрутизация конечной точки ASP.NET 3.x

Во -первых, обязательно переключите Vue CLI или Quasar CLI на выводы файлов распределения на wwwroot напрямую (не DIST).

Quasar cli: regex: «Скомпилировано успешно»
Vue CLI: Regex: «Скомпилируется успешно» или «запуск» или «Сервер начального развития» в зависимости от версии

Причина Starting development server , контрольная точка NPM-Script, работающая на контрольно-пропускной пункте: хотя Dev Server может в конечном итоге сообщить нам URL, который он слушает, он не делает это до тех пор, пока не закончится компиляция, и даже тогда только если не было предупреждений компилятора. Поэтому вместо того, чтобы ждать этого, рассмотрите его готовым, как только он начнет слушать запросы. См. Коды

Параметры конфигурации

При использовании MapToVueCliProxy или UseVueCli вы можете настроить поведение на основе вашего бегуна или компилятора сценария NPM.

Параметр	Тип	Описание	По умолчанию
`npmScript`	нить	Имя сценария в вашем файле Package.json, который запускает Vue-CLI, Quasar CLI или другой веб-сервер.
`spaOptions`	Пресопции	Установите папку приложения для прокси.
`port`	инт	Укажите номер порта сервера 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`	буль	Установите True, если вы используете WSL в Windows. Для других операционных систем это будет проигнорировано. Это изменяет выполненное имя процесса на `wsl` вместо `cmd` .	ЛОЖЬ

См. Mygrating 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 >