( 半盏屠苏犹未举，灯前小草写桃符 )
书接上文《【Blog.Core开源】开发插件，给Swagger加权》，在上篇文章中，我们给项目的接口文档增加了一个控制界面，可以输入用户名密码，这样也算是简单的一个加密控制了，当然也可以使用Nginx的加权功能，具体写法大家搜索下就知道了，这里按下不表。
本文故事背景
花开两朵，各表一枝。今天忙中偷闲，看了看Github上的Issue，都已经四个了，该解决解决了，找了一个单元测试的Bug，简单解决了一下。本着负责的态度，还是要好好测试一下，打开前端项目，npm run serve启动下服务，然后配置下后端接口，点点，没问题，关掉项目，开始提交等等。
突然想到，我可以直接把Vue的项目发布好后，放到Blog.Core后端的wwwroot里，作为静态资源文件来访问，这样每次后端修改完成以后，就不用再打开前端了，比如这样同一个站点：
代码语言：javascript复制Blog.Core的Swagger接口文档：
http://localhost:9291/
Blog.Admin的Vue界面展示效果：
http://localhost:9291/ui/这样就很方便了，说来就来，简单修改下，便满足了，直接上代码。
01PART
打包Vue前端
作为经常开发Vue的小伙伴肯定很熟悉，前后端比较有关联的地方，无非就那么几个：
代码语言：javascript复制1、api的base接口；
// srcapiapi.js
2、打包的相对路径；
// srcrouterindex.js因为是前后端一个域名，所以直接用把base接口设置为后端接口绝对路径就行：
然后给前端增加一个/ui/的路由前缀，所以输出也要改一下：
然后除了那两个修改以外，还有个需要修改的，就是路由模式，经过测试在netcore里静态资源访问Vue项目，如果Vue用history路由的方式话，刷新页面会出现404的问题，毕竟不是nginx，不能修改try_file，不过我再研究下，有更新会发公众号补充。
所以这里先把路由模式改为hash模式：
然后npm run build进行打包，万事俱备，再配置后端。
02PART
修改后端，读取静态文件
后端就相对比较简单些，因为之前该配置的都已经配置好了，只需要将上文打包后文件，拷贝到wwwroot静态文件夹里就行，有一个简单修改的就是配置下默认的index.html作为首页：
// 使用静态文件
DefaultFilesOptions defaultFilesOptions = new DefaultFilesOptions();
defaultFilesOptions.DefaultFileNames.Clear();
defaultFilesOptions.DefaultFileNames.Add("index.html");
app.UseDefaultFiles(defaultFilesOptions);
app.UseStaticFiles();记得要做一下gitignore哟，毕竟文件挺多的。
直接启动项目，浏览/ui/文件夹，就会看到效果了，动图展示下：
做到这里，其实我们的需求已经做完了，以后在不改变接口的情况下，可以直接预览效果，看看接口是否可以。但是却不是完美的，这里随便说一个问题，大家可以自己暂停思考下，看看和我想的是否一致。
这样把前端打包好的dist文件夹放到后端项目，会不会文件又多占地方，又不好看？
如何改进一下呢？
03PART
其他静态文件优化
如果你之前看过我讲过微软的那个微服务架构eShopOnContainer的话，应该知道，它里边就有一个处理的方案，就是zip压缩包。
所以我也有压缩包的形式，放到wwwroot里，然后在项目启动的时候，把压缩包解压到wwwroot的ui文件夹即可。
代码语言：javascript复制 /// <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压缩。
希望能给小伙伴一些灵感吧！
最后祝大家马上到来的除夕愉快！
