aspnetcore vueclimiddleware

Vueclimiddleware - دعم Vue Cli و Quasar Cli

هذه وحدة قائمة بذاتها لإضافة دعم Vue CLI و Quasar CLI إلى ASPNET CORE.

انظر الأمثلة هنا: https://github.com/eeparker/aspnetcore-vueclimiddleware/tree/smaster/samples

توجيه نقطة النهاية ASP.NET 3.x

أولاً ، تأكد من تبديل Vue CLI أو Quasar CLI لإخراج ملفات التوزيع إلى wwwroot مباشرة (وليس dist).

• Quasar CLI: Regex: "تم تجميعه بنجاح"
• Vue CLI: Regex: "تم تجميعها بنجاح" أو "تشغيل في" أو "بدء تطوير خادم التطوير" اعتمادًا على الإصدار

سبب Starting development server ، نقطة تفتيش NPM-Script: على الرغم من أن خادم DEV قد يخبرنا في النهاية عن عنوان URL الذي يستمع إليه ، فإنه لا يفعل ذلك حتى يتم الانتهاء من التجميع ، وحتى في ذلك الوقت فقط إذا لم تكن هناك تحذيرات للمترجم. لذا بدلاً من انتظار ذلك ، فكر في أنه جاهز بمجرد أن يبدأ الاستماع إلى الطلبات. انظر الرموز

خيارات التكوين

عند استخدام MapToVueCliProxy أو UseVueCli ، يمكنك تخصيص السلوك بناءً على عداء نصي NPM أو برنامج التحويل البرمجي.

المعلمة	يكتب	وصف	تقصير
npmScript	خيط	اسم البرنامج النصي في ملف Package.json الذي يطلق Vue-Cli أو Quasar CLI أو خادم الويب الآخر.
spaOptions	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	بول	قم بالتعيين على True إذا كنت تستخدم 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.