.net core 集成vue 实践(解决404问题)

简介

首先此文章为转载,也是自己学习vue的时候读到的,很受用,不过在搭建环境过程中,根据流程走下来,作者的成品效果一直无法实现,有很多小伙伴都会出现404错误提示,搜集相关资料最终找到了问题,其原因就是在整个搭建过程中,少了一步,至此我把此步骤补齐,应该能解决目前遇到的404问题。

 

背景

 

最近在做一个项目,有前端也有后端,基于这辈子再也不可能写es5了(原生js还是很重要滴),所以毅然决然的放弃了采用服务端渲染前端,但是呢,基于项目前期的规模不大,所以考虑把前后端放在一个repo里边,当然发布也是同一网站路径咯。这样有一个好处就是不用考虑跨域的问题,将来如果分离重构的话也不困难,只需把跨域问题解决即可,无论是.net core的cros还是Nginx反代都可以很好的解决跨域问题。react、angular、vue,其中我最熟悉的就是vue,所以采用了vue(全家桶)来实现前端业务。在我们的项目中我将vue的打包发布集成到了.net core编译中,也就是说在编译.net core 项目的同时完成了前端的npm install 和npm run build。下文将会以一个简单实例实现.net core 集成vue。源码地址: 

https://github.com/WalkerLu/DotnetCoreWithVue.git。

 

要求

 

需要你的计算机安装有

 

• .net core 2.0以上版本

• node、webpack、vue-cli、vue (npm install 默认版本即可)

• visual studio 2017/vs code

 

初始化.net core 项目

 

1. 首先打开vs 17(vs code也行)新建一个asp.net core 项目DotnetCoreWithVue

.net core 集成vue 实践(解决404问题)

 

2. 选择API模板,若是想集成docker可以勾选下启用docker支持。关于docker的详细介绍可参考我们的另一篇文章使用TFS玩转Docker自动化部署

.net core 集成vue 实践(解决404问题)

 

使用vue-cli初始化vue 项目

 

• 若未安装node,点击下载链接:

https://nodejs.org/dist/v8.11.4/node-v8.11.4-x64.msi,双击安装即可。

• 若未安装vue输入命令行 npm install -g vue。

• 安装vue-cli npm install -g vue-cli。Npm慢的话可以使用cnpm(淘宝npm镜像)或者yarn。

 

1. 打开命令行工具,这里直接使用的vscode的终端插件。

.net core 集成vue 实践(解决404问题)

 

2. 用webpack 初始化vue

vue init webpack

这里我选择了使用vue路由、ESLint语法规范,另外两个测试模块暂时用不到都填n,关于使用vue webpack 模板的介绍可参考文档:

https://vuejs-templates.github.io/webpack/

参数说明

? Project name  输入项目名称
? Project description 输入项目描述
? Author 作者
? Vue build 打包方式,回车就好了
? Install vue-router?  选择  Y 使用 vue-router,输入 N 不使用
? Use ESLint to lint your code? 代码规范

? Setup unit tests with Karma + Mocha? 单元测试
? Setup e2e tests with Nightwatch? E2E测试

.net core 集成vue 实践(解决404问题)

 

3. 安装依赖

cd DotnetCoreWithVue
npm install

.net core 集成vue 实践(解决404问题)

 

4. 校验项目是否初始化成功。

npm run dev,在浏览器中打开http://localhost:8080,看到如下页面代表vue项目初始化成功。

.net core 集成vue 实践(解决404问题)

 

同步构建(前端+后端)

 

通过编辑项目文件,在项目文件编译前先执行npm命令。

 

1. 在vs 2017 中选中.csproj文件右键修改。

.net core 集成vue 实践(解决404问题)

 

2. 在.csproj 文件中添加如下代码,即表示在构建之前先执行 npm installnpm run build

<Target Name="PrecompileScript" BeforeTargets="BeforeBuild">
  <Exec Command="npm install " />
  <Exec Command="npm run build" />
</Target>

 

3. 编译查看结果,可以在输出控制台查看日志。

.net core 集成vue 实践(解决404问题)

查看生成目录

.net core 集成vue 实践(解决404问题)

 

修改webpack生成路径

 

在asp.net core 项目中我们习惯将静态文件放到wwwroot 目录下,现在我们只需修改下webpack 配置文件即可。

 

1. 修改config/index.js 文件。

.net core 集成vue 实践(解决404问题)

 

2. 重新编译,查看生成文件路径。

.net core 集成vue 实践(解决404问题)

.net core 集成vue 实践(解决404问题)

 

前后端交互

 

1. 修改controller的第一个方法,将返回数据第一个改为:dotnet core with vue。

.net core 集成vue 实践(解决404问题)

cd DotnetCoreWithVue
npm install
// GET api/values
[HttpGet]
public ActionResult<IEnumerable<string>> Get()
 {
  return new string[] { "dotnet core with vue", "value2" };
  }
  

 

2. 修改HelloWorld.vue,添加如下代码,请求后端api,然后编译项目。这里使用的requst 为小编封装的axios,各位感兴趣的话可以直接去github 查看代码 

https://github.com/WalkerLu/DotnetCoreWithVue/blob/master/DotnetCoreWithVue/src/utils/request.js

.net core 集成vue 实践(解决404问题)

 mounted () {
 request({ 
   url: ‘api/values‘,
   method: ‘get‘
   }).then(response => {
  console.log(response)
  this.msg = response.data[0]
    })
     }

 3.打开Startup。(原文少的一步)

在Configure(IApplicationBuilder app, IHostingEnvironment env)方法中加入以下代码

DefaultFilesOptions options = new DefaultFilesOptions();
options.DefaultFileNames.Clear();
options.DefaultFileNames.Add("index.html");
app.UseDefaultFiles(options);

app.UseStaticFiles();

.net core 集成vue 实践(解决404问题)

 

 

 

4. 重新编译项目

请求http://localhost:40051/#/ 验证代码,端口号视应用程序配置需自行修改。

.net core 集成vue 实践(解决404问题)

 

总结

 

至此.net core 集成vue的基本操作都完成了,其中用的技术(.net core、vue、router、webpack、es6…)展开了来讲都可以出一个系列了,当然网上也不乏文档资料。故此文的的侧重点在于如何开始dotnet core with vue ?对于技术细节也没有深入探讨,如果读者有.net core 获取vue 前端方面的话题或问题欢迎大家积极留言评论,我们一起探讨学习。当然咯,重构前端也好,前后端分离也好都需要切合实际的选择最合适自己的方案。如果刚好你既需要同时编写前端和后端,且想使用VUE全家桶的同时又希望可以代码可以一键式编译的话,或许可以试试这种方式。

 

 

原文地址: https://devopshub.cn/2018/08/30/dotnetcore-vue/

.net core 集成vue 实践(解决404问题)

上一篇:无单位数字和行高 —— 别说你懂CSS相对单位


下一篇:css 清除浮动