一、项目搭建

背景

最近在做一个项目,有前端也有后端,基于现在流行的框架—Vue全家桶)来实现前端业务。在我们的项目中我将vue的打包发布集成到了.net core编译中,也就是说我在编译.net core 项目的同时完成了前端的npm install 和npm run build。下文将会已一个简单实例实现.net core 集成vue。 本文前半部分借用了大佬的文章,但是中间会出现一些问题,导致项目搭建失败,出现的问题我会在文中给出解决办法。
源码还没上传,等有空了整理一下上传。

要求

需要你的计算机安装有
• .net 5.0
• node、webpack、vue-cli、vue (npm install 默认版本即可)
• visual studio 2019/vs code

初始化.net core 项目

1. 首先打开vs 19(vs code也行)新建一个asp.net core 项目DotnetCoreWithVue.Net core集成vue项目搭建与部署 - 图1 2. 选择API模板,若是想集成docker可以勾选下启用docker支持。关于docker的详细介绍可参考我们的另一篇文章使用TFS玩转Docker自动化部署.Net core集成vue项目搭建与部署 - 图2.Net core集成vue项目搭建与部署 - 图3 ### 使用vue-cli初始化vue 项目 • 若未安装node,点击下载链接,双击安装即可
• 若未安装vue输入命令行 npm install -g vue
• 安装vue-cli npm install -g vue-cli。Npm慢的话可以使用cnpm(淘宝npm镜像)或者yarn.
  1. 打开命令行工具,这里直接使用的vscode的终端插件.Net core集成vue项目搭建与部署 - 图4
  2. 用webpack 初始化vue,这里我选择了使用vue路由、ESLint语法规范,另外两个测试模块暂时用不到都填n,关于vue webpack 模板的介绍可参考文:https://vuejs-templates.github.io/webpack/
  1. vue init webpack
.Net core集成vue项目搭建与部署 - 图5 3. 安装依赖
  1. cd DotnetCoreWithVue
  2. npm install
.Net core集成vue项目搭建与部署 - 图6 4. 校验项目是否初始化成功
npm run dev,在浏览器中打开http://localhost:8080,看到如下页面代表vue项目初始化成功。.Net core集成vue项目搭建与部署 - 图7 ### 编写项目文件 通过编译项目文件,在项目文件编译前先执行npm命令 1. 在vs 2019 中选中.csproj文件右键修改.Net core集成vue项目搭建与部署 - 图8 2. 在.csproj 文件中添加如下代码,即表示在构建之前先执行 npm install 和npm run build
npm install不是必须的,调试项目的时候可以注释。 javascript <Target Name="PrecompileScript" BeforeTargets="BeforeBuild"> <Exec Command="npm install" /> <Exec Command="npm run build" /> </Target> 3. 编译查看结果,可以在输出控制台查看日志.Net core集成vue项目搭建与部署 - 图9 查看生成目录.Net core集成vue项目搭建与部署 - 图10 ### 修改webpack发布到wwwroot 目录 在asp.net core 项目中我们习惯将静态文件放到wwwroot 目录下,现在我们只需修改下webpack 配置文件即可。
  1. 修改conf/index.js 文件.Net core集成vue项目搭建与部署 - 图11
  2. 重新编译,查看生成文件路径.Net core集成vue项目搭建与部署 - 图12.Net core集成vue项目搭建与部署 - 图13

前后端交互

  1. 修改controller的第一个方法,将返回数据第一个改为:dotnet core with vue.Net core集成vue项目搭建与部署 - 图14
  1. // GET api/values
  2. [HttpGet]
  3. public ActionResult<IEnumerable<string>> Get()
  4. {
  5. return new string[] { dotnet core with vue”, value2 };
  6. }
  1. 修改HelloWorld.vue,添加如下代码,请求后端api,然后编译项目。这里使用的requst 为小编封装的axios,各位感兴趣的话可以直接去github 查看代码

.Net core集成vue项目搭建与部署 - 图15

  1. mounted () {
  2. request({
  3. url: api/values’,
  4. method: get
  5. }).then(response => {
  6. console.log(response)
  7. this.msg = response.data[0]
  8. })
  9. }
3. 请求http://localhost:40051/#/ 验证代码,这里的端口号需自行修改。.Net core集成vue项目搭建与部署 - 图16 ### 问题 #### 1. 请求http://localhost:40051/#/失败 在startUp.cs文件加入app.UseStaticFiles();,开启静态文件访问权限。 javascript app.UseStaticFiles(); 如果上述方法不行,可以暴力点,将文件路径指定,如下: javascript //设置主页 /* 这里直接使用的是默认的,就是 UseDefaultFiles 会重定向到 default.htm、default.html、index.htm、index.html。 *当然你也可以指定设置的首页(指定的页面是可以自定义的!) */ DefaultFilesOptions defaultFilesOptions = new DefaultFilesOptions(); defaultFilesOptions.DefaultFileNames.Clear(); defaultFilesOptions.DefaultFileNames.Add("index.html"); app.UseDefaultFiles(defaultFilesOptions); //UseDefaultFiles 仅仅是一个重定向URL而不是真的提供一个文件,真正提供静态文件的还是 UseStaticFiles。 //暴力点,虚拟路径 var provider = new FileExtensionContentTypeProvider(); foreach (var key in options.Value.Keys) { provider.Mappings.Add(key, options.Value[key]); } app.UseStaticFiles(new StaticFileOptions() { FileProvider = new PhysicalFileProvider(Path.Combine(Directory.GetCurrentDirectory(), @"wwwroot")), ContentTypeProvider = provider }); //再暴力点,直接绝对路径 StaticFileOptions staticFileOptions = new StaticFileOptions(); //指定目录你站点api的要访问的wwwroot目录 staticFileOptions.FileProvider = new Microsoft.Extensions.FileProviders.PhysicalFileProvider(@"D:\Workplace\Back\testVue\wwwroot\"); app.UseStaticFiles(staticFileOptions); ### 总结 至此.net core 集成vue的基本操作都完成了,其中用的技术(.net core、vue、router、webpack、es6…)展开了来讲都可以出一个系列了,当然网上也不乏文档资料。故此文的的侧重点在于如何开始dotnet core with vue ?对于技术细节也没有深入探讨,如果读者有.net core 获取vue 前端方面的话题或问题欢迎大家积极留言评论,我们一起探讨学习。当然咯,重构前端也好,前后端分离也好都需要切合实际的选择最合适自己的方案。如果你刚好前后端都是同一个部门在开发的话,或许可以试试这种方式。

二、IIS部署

简单了解

.net core webapi创建后,默认就创建了一个wwwroot的文件夹,这个文件夹是用来放置静态文件的,所以,我们可以理解成,这个文件夹将放置我们的build好的前端项目。

.Net core集成vue项目搭建与部署 - 图17

OK,到现在来讲,有一个很有意思的发现,这项目的部署跟mvc的部署的很像(这里不涉及底层运行,只是一个发布后简单的像而已)。

.Net core集成vue项目搭建与部署 - 图18

由上图就足够清晰了,这样的部署是属于开发上的前后端分离,他们同属于一个站点,绑定同一个域名,所以不涉及跨域,外部不能直接调用webapi(安全上还是有保证的)。

以网站方式部署

这个方式网上有许多文章介绍,也不复杂,本文主要介绍以二级目录方式部署,亦称应用程序部署。

二级目录部署(应用程序部署)

由于项目搭建时,已经将vue打包后的文件放在了.net core项目的wwwroot文件夹下,故此处只需将.net core项目打包发布即可。

在一级目录下右键,新建应用程序,将路径指到打包的项目即可。

注意事项

1. 应用池须选择

应用池选择:无托管代码、集成

2. vue打包后访问js,css路径不对

  • css

build/utils 新增一行代码

.Net core集成vue项目搭建与部署 - 图19

  • js

config/index.js 路径改成./ 注意只需要改build对象下的路径,dev下的路径不要改,不然本地运行不了

.Net core集成vue项目搭建与部署 - 图20

3. swagger

  • 访问404

将UseSwagger放在env.IsDevelopment()外层

  1. if (env.IsDevelopment())
  2. {
  3. app.UseDeveloperExceptionPage();
  4. // app.UseSwagger();
  5. // app.UseSwaggerUI(c => c.SwaggerEndpoint("/swagger/v1/swagger.json", "testVue v1"));
  6. }
  7. app.UseSwagger();
  8. app.UseSwaggerUI(c => c.SwaggerEndpoint("/testVue/swagger/v1/swagger.json", "testVue v1"));
  • 报错Not Found
对于swagger.json,您需要像c.SwaggerEndpoint(“/mysite/swagger/v1/swagger.json”,”My API V1”);一样在SwaggerEndpoint之前附加网站。如您所见,您的swagger.json位于http://localhost/mysite/swagger/v1/swagger.json下而不是http://localhost/swagger/v1/swagger.json下。
  1. app.UseSwaggerUI(c =>
  2. {
  3. #if DEBUG
  4. // For Debug in Kestrel
  5. c.SwaggerEndpoint("/swagger/v1/swagger.json","Web API V1");
  6. #else
  7. // To deploy on IIS
  8. c.SwaggerEndpoint("/mysite/swagger/v1/swagger.json","Web API V1");
  9. #endif
  10. c.RoutePrefix = string.Empty;
  11. });