通过.netCore运行vue项目的解决方案

背景

最近有个特殊的需求需要通过.netCore来启动vue项目，而不是通过npm run dev 来启动。

这里不写dotnetCore的壳子是怎么写的，我们只需要可以利用dotnetCore把项目启动起来就可以。
用起来就跟用vue-cli一样。（废话，我就是用vue-cli 2创建的项目）

用vue-cli3的朋友们需要稍加修改。

事前准备

• .netCore 2.1
• vue-cli 2.9.6
• vs2017或者vs code

步骤

这里的代码我直接拿了参考文档中的作者写的代码，稍加修改。

1 随便找个目录创建自己的Vue项目

项目在哪里都好，不在dotnetCore的目录里面也可以，看到第五步的路径就明白啦。

这里直接通过vue-cli创建项目就可以。我只是不通过npm run dev来启动，必须套在dotnetCore里面,通过dotnetCore启动，没说不能用vue-cli啊，哈哈哈哈哈~

2 下载node_modules

注意：一定要下载aspnet-webpack和webpack-hot-middleware，如果没有这两个，那么不会成功打开项目页！ ！！没有这两个会报找不到包的错误，然后看到404

我这里用的是aspnet-webpack 3.0.0的版本。

3 创建.netCore项目

新建 项目文件夹 aspnetcore-vuejs,在vs code打开终端，输入dotnet new mvc 新建 asp.net core 2.1项目。

4 添加Webpack

打开 Startup.cs 加上using Microsoft.AspNetCore.SpaServices.Webpack;

5 配置webpack

  app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions
  {
       HotModuleReplacement = true,
       ConfigFile = "D:\\Study\\FrontEnd\\githubDemo\\dotnetcore-vue-demo\\dotnetcore_vue_test\\build\\webpack.dev.conf.js", // 可选，vue项目webpack.dev.conf.js地址, 不写默认在当前.netCoer项目根目录下找webpack.config.js; 这个路径根据自己的项目来安排，这里只是方便展示。随意啦，我都直接放到dotnetcore-vue-demo的目录外面，dotnetcore-vue-demo里面只放后端的东西，前端的东西单独放在别的地方
       ProjectPath = "D:\\Study\\FrontEnd\\githubDemo\\dotnetcore-vue-demo\\dotnetcore_vue_test" // 可选，这个配置可以配置node_modules路径。不配置就会让vue项目自己去找node_modules
   });

我们通过npm run dev 启动的也是webpack.dev.conf.js，所以这里同样也启动这个文件就好啦。

6 还原nuget包

在终端中执行dotnet restore命令以还原缺少的Nuget包

7 启动，走你~

点击这个图标或者直接F5，走你~

哦了~

结尾

既然项目是用vue-cli搭建的，原来的npm命令当然也可以用，我依然用npm run build打包。

源码下载

github: dotnetcore-vue

参考文档

搭建ASP.NET Core 2.1与Vue.js结合开发的模板