using System; using System.Collections.Generic; using System.Diagnostics; using System.Linq; using System.Threading.Tasks; using Microsoft.AspNetCore.Mvc; using dotnet_core_vue_cli.Models;
namespace dotnet_core_vue_cli.Controllers { public class HomeController : Controller { public IActionResult Index() { return View(); }
誒~你有沒有注意到奇怪的地方啊?!我們跑 vue 的時候是用 node server 執行,但是真正專案要在 .NET server 執行。所以怎麼把這兩者結合呢?主要原理就是:在 Development 時把 node server 當作是前端產生靜態資源 (JS, Css, images…) 的工具; Production 的部分就把產出過後的靜態資源給 .NET server 使用。廢話不多說,我們就來趕緊試試看吧。
...... // This method gets called by the runtime. Use this method to configure the HTTP request pipeline. public void Configure(IApplicationBuilder app, IHostingEnvironment env) { // [HMR] http://www.c-sharpcorner.com/article/using-hot-module-replacement-feature-of-webpack-in-asp-net-core/ if (env.IsDevelopment()) { app.UseDeveloperExceptionPage(); app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions { HotModuleReplacement = true }); } ...... app.UseMvc(routes => { routes.MapRoute( name: "default", template: "{controller=Home}/{action=Index}/{id?}");
// Use Vue Router must add fallback route // Help to navigate directly // https://stu.ratcliffe.io/2017/07/20/vuejs-serverside-rendering-with-aspnet-core routes.MapSpaFallbackRoute("spa-fallback", new { controller = "Home", action = "Index" }); }); } ......