(?半盞屠蘇猶未舉，燈前小草寫桃符?)

書接上文《【Blog.Core開源】開發插件，給Swagger加權》，在上篇文章中，我們給項目的接口文檔增加了一個控制界面，可以輸入用戶名密碼，這樣也算是簡單的一個加密控制了，當然也可以使用Nginx的加權功能，具體寫法大家搜索下就知道了，這里按下不表。

本文故事背景

花開兩朵，各表一枝。今天忙中偷閑，看了看Github上的Issue，都已經四個了，該解決解決了，找了一個單元測試的Bug，簡單解決了一下。本著負責的態度，還是要好好測試一下，打開前端項目，npm run serve啟動下服務，然后配置下后端接口，點點，沒問題，關掉項目，開始提交等等。

突然想到，我可以直接把Vue的項目發布好后，放到Blog.Core后端的wwwroot里，作為靜態資源文件來訪問，這樣每次后端修改完成以后，就不用再打開前端了，比如這樣同一個站點：

Blog.Core的Swagger接口文檔： http://localhost:9291/Blog.Admin的Vue界面展示效果： http://localhost:9291/ui/

這樣就很方便了，說來就來，簡單修改下，便滿足了，直接上代碼。

01

PART

打包Vue前端

作為經常開發Vue的小伙伴肯定很熟悉，前后端比較有關聯的地方，無非就那么幾個：

1、api的base接口； // src\api\api.js2、打包的相對路徑； //?src\router\index.js

因為是前后端一個域名，所以直接用把base接口設置為后端接口絕對路徑就行：

然后給前端增加一個/ui/的路由前綴，所以輸出也要改一下：

然后除了那兩個修改以外，還有個需要修改的，就是路由模式，經過測試在netcore里靜態資源訪問Vue項目，如果Vue用history路由的方式話，刷新頁面會出現404的問題，畢竟不是nginx，不能修改try_file，不過我再研究下，有更新會發公眾號補充。

所以這里先把路由模式改為hash模式：

然后npm run build進行打包，萬事俱備，再配置后端。

02

PART

修改后端，讀取靜態文件

后端就相對比較簡單些，因為之前該配置的都已經配置好了，只需要將上文打包后文件，拷貝到wwwroot靜態文件夾里就行，有一個簡單修改的就是配置下默認的index.html作為首頁：

// 使用靜態文件DefaultFilesOptions defaultFilesOptions = new DefaultFilesOptions();defaultFilesOptions.DefaultFileNames.Clear();defaultFilesOptions.DefaultFileNames.Add("index.html");app.UseDefaultFiles(defaultFilesOptions);app.UseStaticFiles();

記得要做一下gitignore喲，畢竟文件挺多的。

直接啟動項目，瀏覽/ui/文件夾，就會看到效果了，動圖展示下：

做到這里，其實我們的需求已經做完了，以后在不改變接口的情況下，可以直接預覽效果，看看接口是否可以。但是卻不是完美的，這里隨便說一個問題，大家可以自己暫停思考下，看看和我想的是否一致。

這樣把前端打包好的dist文件夾放到后端項目，會不會文件又多占地方，又不好看？

如何改進一下呢？

03

PART

其他靜態文件優化

如果你之前看過我講過微軟的那個微服務架構eShopOnContainer的話，應該知道，它里邊就有一個處理的方案，就是zip壓縮包。

所以我也有壓縮包的形式，放到wwwroot里，然后在項目啟動的時候，把壓縮包解壓到wwwroot的ui文件夾即可。

/// <summary>/// 將前端UI壓縮文件進行解壓/// </summary>public static class UiFilesZipSetup{public static void AddUiFilesZipSetup(this IServiceCollection services, IWebHostEnvironment _env){if (services == null) throw new ArgumentNullException(nameof(services));string zipUiItemFiles = Path.Combine(_env.ContentRootPath, "wwwroot", "ui.zip");ZipFile.ExtractToDirectory(zipUiItemFiles, Path.Combine(_env.ContentRootPath, "wwwroot"));}}

然后在startup的服務配置中，引用一下就好，后端最終修改是這么多：

好啦，今天的優化就這么多了，開發還是要盡量做到力所能及：

比如單元測試，比如靜態文件修改，比如zip壓縮。

希望能給小伙伴一些靈感吧！

最后祝大家馬上到來的除夕愉快！

總結

以上是生活随笔為你收集整理的【Blog.Core开源】快速预览Admin界面效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。