經過.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結合開發的模板