簡介
首先此文章為轉載，也是自己學習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。
2. 選擇API模板，若是想集成docker可以勾選下啟用docker支持。關於docker的詳細介紹可參考我們的另一篇文章使用TFS玩轉Docker自動化部署。
使用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的終端插件。
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測試
3. 安裝依賴
cd DotnetCoreWithVue
npm install
4. 校驗項目是否初始化成功。
npm run dev，在瀏覽器中打開http://localhost:8080,看到如下頁面代表vue項目初始化成功。
同步構建（前端+后端）
通過編輯項目文件，在項目文件編譯前先執行npm命令。
1. 在vs 2017 中選中.csproj文件右鍵修改。
2. 在.csproj 文件中添加如下代碼，即表示在構建之前先執行 npm install 和npm run build。
<Target Name="PrecompileScript" BeforeTargets="BeforeBuild">
<Exec Command="npm install " />
<Exec Command="npm run build" />
</Target>
3. 編譯查看結果，可以在輸出控制台查看日志。
查看生成目錄
修改webpack生成路徑
在asp.net core 項目中我們習慣將靜態文件放到wwwroot 目錄下，現在我們只需修改下webpack 配置文件即可。
1. 修改config/index.js 文件。
2. 重新編譯，查看生成文件路徑。
前后端交互
1. 修改controller的第一個方法，將返回數據第一個改為：dotnet core with vue。
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
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();
4. 重新編譯項目
請求http://localhost:40051/#/ 驗證代碼，端口號視應用程序配置需自行修改。
總結
至此.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/