.NET 5 之後會將 dotnet 各 platform 整合起來，且 dotnet 3.1 cshtml HMR 的 extension 功能被官方強迫棄用，目前我看各方文章感覺還沒有一個很好的升級方式。要馬就是改用網友寫的 Vue-Cli，把 config 轉到 cli，要馬就是 Nuget 套件改用網友寫的。我自己參考國外文章，是有人用 Vite 做到用 index.cshtml 的 HMR: 這篇。但是因為公司內部還是有 IE 瀏覽器且 Vite 相關套件還沒有到完整，沒辦法放棄使用 webpack，只好參考這篇嘗試用 webpack HMR，很不幸的，若照文章模仿雖然 HMR 字眼有出現，但一直沒有正常作用，胡亂嘗試了一番，勉強用奇怪的方式有做到 Auto Reload，但沒有 HMR 效果就不太滿意。目前先將這些研究文章和亂試的方式記錄下來。

.csproj

1
2
3
4
5
6
7
8
<Project Sdk="Microsoft.NET.Sdk.Web">
  <PropertyGroup>
    <TargetFramework>net5.0</TargetFramework>
  </PropertyGroup>
  <ItemGroup>
    <PackageReference Include="Microsoft.AspNetCore.SpaServices.Extensions" Version="5.0.6" />
  </ItemGroup>
</Project>

Program.cs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
...
using Microsoft.Extensions.Hosting;

namespace dotnet_core_vue_cli
{
    public class Program
    {
        public static void Main(string[] args)
        {
            CreateHostBuilder(args).Build().Run();
        }

        public static IHostBuilder CreateHostBuilder(string[] args) =>
            Host.CreateDefaultBuilder(args)
                .ConfigureWebHostDefaults(webBuilder =>
                {
                    webBuilder.UseStartup<Startup>();
                });
    }
}

Startup.cs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
...
using Microsoft.Extensions.Hosting;
using Microsoft.AspNetCore.SpaServices.ReactDevelopmentServer;

namespace dotnet_core_vue_cli
{
    public class Startup
    {
        ...

        public void ConfigureServices(IServiceCollection services)
        {
            services.AddControllersWithViews();
        }
        ...

        public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }
            else
            {
                app.UseExceptionHandler("/Home/Error");
            }

            app.UseStaticFiles();

            app.UseRouting();

            app.UseEndpoints(endpoints =>
            {
                endpoints.MapControllerRoute(
                    name: "default",
                    pattern: "{controller=Home}/{action=Index}/{id?}");
                endpoints.MapFallbackToController("Index", "Home");
            });

            if (env.IsDevelopment())
            {
                app.UseSpa(spa =>
                {
                    // SPA的檔案放在最外層
                    spa.Options.SourcePath = "./";
                    // webpack-dev-server 起在 port 3000
                    spa.Options.DevServerPort = 3000;
                    
                    // 呼叫 npm run start
                    spa.UseReactDevelopmentServer(npmScript: "start");
                });
            }
        }
    }
}

webpack.xxx.js

webpack.dev.js 把 entry 部分 加入 ‘webpack-dev-server/client?http://localhost:3000/‘ 進去 js，devServer 設定如下。其中的原因可參考這位網友解釋。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
...
module.exports = merge(base, {
    entry: {
        main: [
            'webpack-dev-server/client?http://localhost:3000/',
            './src/main.js'
        ]
    },
    mode: 'development',
    devServer: {
        historyApiFallback: true,
        noInfo: false,
        // hot: true,
        port: 3000,
        inline: false,
        liveReload: true,
    },
    devtool: 'eval-source-map',
})

package.json

npm run hmr 會呼叫 dotnet run 把專案跑起來。
執行 startup.cs 會自動呼叫 npm run start 顯示 “Starting the development server”。之後就會將 port 3000(webpack-dev-server) 跟 8080(dotnet) 做對應。

1
2
3
4
5
6
7
8
9
10
{
    ...
    "scripts": {
        "hmr": "cross-env ASPNETCORE_ENVIRONMENT=Development NODE_ENV=development dotnet run",
        "start": "echo Starting the development server && webpack serve --config webpack.config.js",
        "dev": "webpack serve --config webpack.config.js",
        "build": "webpack --config webpack.pro.js"
    },
    ...
}

這樣起來的專案就會依據 vue code 修改做 Auto Reload 的動作，程式放在 Github。

參考資料