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

書(shū)接上文《【Blog.Core開(kāi)源】開(kāi)發(fā)插件，給Swagger加權(quán)》，在上篇文章中，我們給項(xiàng)目的接口文檔增加了一個(gè)控制界面，可以輸入用戶名密碼，這樣也算是簡(jiǎn)單的一個(gè)加密控制了，當(dāng)然也可以使用Nginx的加權(quán)功能，具體寫(xiě)法大家搜索下就知道了，這里按下不表。

本文故事背景

花開(kāi)兩朵，各表一枝。今天忙中偷閑，看了看Github上的Issue，都已經(jīng)四個(gè)了，該解決解決了，找了一個(gè)單元測(cè)試的Bug，簡(jiǎn)單解決了一下。本著負(fù)責(zé)的態(tài)度，還是要好好測(cè)試一下，打開(kāi)前端項(xiàng)目，npm run serve啟動(dòng)下服務(wù)，然后配置下后端接口，點(diǎn)點(diǎn)，沒(méi)問(wèn)題，關(guān)掉項(xiàng)目，開(kāi)始提交等等。

突然想到，我可以直接把Vue的項(xiàng)目發(fā)布好后，放到Blog.Core后端的wwwroot里，作為靜態(tài)資源文件來(lái)訪問(wèn)，這樣每次后端修改完成以后，就不用再打開(kāi)前端了，比如這樣同一個(gè)站點(diǎn)：

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

這樣就很方便了，說(shuō)來(lái)就來(lái)，簡(jiǎn)單修改下，便滿足了，直接上代碼。

01

PART

打包Vue前端

作為經(jīng)常開(kāi)發(fā)Vue的小伙伴肯定很熟悉，前后端比較有關(guān)聯(lián)的地方，無(wú)非就那么幾個(gè)：

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

因?yàn)槭乔昂蠖艘粋€(gè)域名，所以直接用把base接口設(shè)置為后端接口絕對(duì)路徑就行：

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

然后除了那兩個(gè)修改以外，還有個(gè)需要修改的，就是路由模式，經(jīng)過(guò)測(cè)試在netcore里靜態(tài)資源訪問(wèn)Vue項(xiàng)目，如果Vue用history路由的方式話，刷新頁(yè)面會(huì)出現(xiàn)404的問(wèn)題，畢竟不是nginx，不能修改try_file，不過(guò)我再研究下，有更新會(huì)發(fā)公眾號(hào)補(bǔ)充。

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

然后npm run build進(jìn)行打包，萬(wàn)事俱備，再配置后端。

02

PART

修改后端，讀取靜態(tài)文件

后端就相對(duì)比較簡(jiǎn)單些，因?yàn)橹霸撆渲玫亩家呀?jīng)配置好了，只需要將上文打包后文件，拷貝到wwwroot靜態(tài)文件夾里就行，有一個(gè)簡(jiǎn)單修改的就是配置下默認(rèn)的index.html作為首頁(yè)：

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

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

直接啟動(dòng)項(xiàng)目，瀏覽/ui/文件夾，就會(huì)看到效果了，動(dòng)圖展示下：

做到這里，其實(shí)我們的需求已經(jīng)做完了，以后在不改變接口的情況下，可以直接預(yù)覽效果，看看接口是否可以。但是卻不是完美的，這里隨便說(shuō)一個(gè)問(wèn)題，大家可以自己暫停思考下，看看和我想的是否一致。

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

如何改進(jìn)一下呢？

03

PART

其他靜態(tài)文件優(yōu)化

如果你之前看過(guò)我講過(guò)微軟的那個(gè)微服務(wù)架構(gòu)eShopOnContainer的話，應(yīng)該知道，它里邊就有一個(gè)處理的方案，就是zip壓縮包。

所以我也有壓縮包的形式，放到wwwroot里，然后在項(xiàng)目啟動(dòng)的時(shí)候，把壓縮包解壓到wwwroot的ui文件夾即可。

/// <summary>/// 將前端UI壓縮文件進(jìn)行解壓/// </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的服務(wù)配置中，引用一下就好，后端最終修改是這么多：

好啦，今天的優(yōu)化就這么多了，開(kāi)發(fā)還是要盡量做到力所能及：

比如單元測(cè)試，比如靜態(tài)文件修改，比如zip壓縮。

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

最后祝大家馬上到來(lái)的除夕愉快！

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。