---
title: 快速建立一個 Vue3+ASP.NET Core 的專案
tags: Vue3,ASP.NET Core,Vue-CLi
description: 紀錄一下過程
---

# 快速建立一個 `Vue3+ASP.NET Core` 的專案
使用 `vue-cli + asp.net core web api` 建立一個前後端分離的專案

## 事前準備

* 所需環境
* [Node JS](https://nodejs.org/dist/v14.16.0/node-v14.16.0-x64.msi)
* [IIS](http://blog.e-happy.com.tw/iis-win10-%E5%AE%89%E8%A3%9D-iis-%E7%9A%84%E6%93%8D%E4%BD%9C%E7%AD%86%E8%A8%98/)
* [IIS dotnet-hosting](https://dotnet.microsoft.com/permalink/dotnetcore-current-windows-runtime-bundle-installer)
* ~~[IIS Rewrite](https://www.iis.net/downloads/microsoft/url-rewrite)~~
* 所需工具
* [VS 2019](https://visualstudio.microsoft.com/zh-hant/thank-you-downloading-visual-studio/?sku=Community&rel=16)
* [VueJS 3.0 with .NET5](https://marketplace.visualstudio.com/items?itemName=alexandredotnet.vuejsdotnetfive)
* vue-cli

## 建置
環境和工具的安裝就不多贅述了，首先開啟我們的 VS 2019 選擇下載好的 [VueJS 3.0 with .NET5](https://marketplace.visualstudio.com/items?itemName=alexandredotnet.vuejsdotnetfive) 建立完成後直接執行


執行過程中你會看到下方的提示訊息
`Restoring dependencies using 'npm'. This may take several minutes...`
這代表此 Template 已經幫你設好使用 npm i 幫你安裝 ClientApp 資料夾裡的依賴套件


最後等待一下瀏覽器出來看到這個畫面就代表成功了


## 部署
再來就是部署到我們的 IIS，假設預設部署到子目錄下且有用 Vue Router 的情況下必須在 `router/index.js` 增加 base path 的[設定](https://router.vuejs.org/zh/api/#base)

//router/index.js
const router = createRouter({
    history: createWebHistory("vue3test"),
    routes,
});

然後此 Template 預設在生產環境顯示 SPA 靜態檔案的位址是在 ClientApp ,因此在 `StartUp.cs` 需改成如下

configuration.RootPath = "ClientApp/dist";

都設定完成後就可以執行[發布](https://docs.microsoft.com/zh-tw/aspnet/core/host-and-deploy/?view=aspnetcore-5.0)，它會自動幫你打開部署好的網頁，若出現跟開發一樣的畫面就代表成功了，這時候點到上方 `Fetch Data` 標籤，發現報 404 錯誤，這時候跑去 FetchData 的元件發現原因，修改後再重新發布即可

//別分設定開發和生產環境路徑
axios.get(process.env.BASE_URL+'weatherforecast')

~~也因為 Template 的 Vue Router 預設是使用 history mode ，官方建議我們在後端 `web.config` 的地方也做[設定](https://router.vuejs.org/zh/guide/essentials/history-mode.html#%E5%90%8E%E7%AB%AF%E9%85%8D%E7%BD%AE%E4%BE%8B%E5%AD%90)~~

<!-- web.config -->
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="Handle History Mode and custom 404/500" stopProcessing="true">
          <match url="(.*)" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
          </conditions>
          <action type="Rewrite" url="/" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

---
# 其他問題
## 1.如果一樣在子目錄但專案沒有用 Vue Router 生產路徑和開發路徑該怎麼設置?

針對生產環境的路徑做[設定]新增一個 `vue.config.js`

//vue.config.js 如果沒有 Vue Router 改用這一段
module.exports = {
    publicPath: process.env.NODE_ENV === 'production'
        ? '/production-sub-path/'
        : '/'
}

## 2.修改預設 dev server port
有些人可能發現打開網頁的時候畫面不是 Template 的樣子而是其他內容，這是因為 webpack dev server 預設的 port 是 `8080` 其他的專案可能先佔用到[http://localhost:8080/](http://localhost:8080/) 了，除了關閉其他專案，我們可以透過修改 port 的方式來避免重複占用的情形，只要在 `Startup.cs` 做修改即可

//將這一行 spa.UseVueCli(npmScript: "serve"); 修改為以下
spa.UseVueCli(npmScript: "serve",port:8888);