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

背景

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

这里不写dotnetCore的壳子是怎么写的，咱们只须要能够利用.netCore把项目启动起来就能够。 用起来就跟用vue-cli同样。（废话，我就是用vue-cli 2建立的项目） 用vue-cli3的朋友们须要稍加修改。

事前准备

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

步骤

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

1 随便找个目录建立本身的Vue项目

项目在哪里都好，不在.netCore的目录里面也能够，看到第五步的路径就明白啦。

这里直接经过vue-cli建立项目就能够。我只是不经过npm run dev来启动，必须套在.netCore里面,经过.netCore启动，没说不能用vue-cli啊，哈哈哈哈哈~

2 下载node_modules

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

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

3 建立.netCore项目

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，走你~（或者部署到iis上面）

哦了~

结尾

既然项目是用vue-cli搭建的，原来的npm命令固然也能够用。

源码下载

github: dotnetcore-vue

参考文档

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