【原創】Asp.NET Core Web API與Vue 3.0搭建前後分離專案

特地記錄一下，網上的教學寫的稀裡糊塗的，整得我都心塞塞的，其實實現的過程蠻簡單的

問題是這樣的：我將Vue構建生成好的檔案，放在後端wwwroot檔案裡面，並開啟靜態檔案存取功能，結果總是無法顯示相應的Vue頁面，其原因在於路徑沒有帶#，導致路由失敗

網上找了很久，很少有這麼搭建專案的教學，還是記錄一下，算是鋪路叭~

後端：Asp.NET Core Web API，版本是 .NET 6

前端：Vue 3 + Vite

後端WebAPI部分：

1) Program.cs

在app.UseHttpsRedirection();下面新增這兩行程式碼，用來啟用靜態檔案的存取：

app.UseDefaultFiles();
app.UseStaticFiles();

2）控制器程式碼

在類名的上方新增 [Route("api/[controller]/[action]")]

 [ApiController]
 [Route("api/[controller]/[action]")]
 public class AccountController :  ControllerBase
 {
      //your code
 }

3) 跨域策略(可有可無)

正常是前端呼叫後端介面，是不需要設定跨域的，如果有需要，可以在Program.cs新增跨域策略

//新增跨域策略
builder.Services.AddCors(options =>
{
      // 這定義了一個名為 ``default`` 的 CORS 策略
      options.AddPolicy("default", policy =>
       {
             policy.AllowAnyOrigin()
                 .AllowAnyHeader()
                 .AllowAnyMethod();
         });
});

在var app = builder.Build();後面新增使用

 app.UseCors("default");

4）建立一個wwwroot的資料夾，這個資料夾用來放置Vue編譯後生成的檔案，拷過來放進去就可以

以上就是後端部分要設定的

前端Vue部分：

由於我趕潮流，用上Vue3 + Vite，於是踩上坑了，導致一直存取不到前端的頁面，顯示404錯誤。

主要問題在於vue的路由設定方面：vue-router路由版本：4以上，路由程式碼如下：

import { createRouter, createWebHashHistory, createWebHistory, RouteRecordRaw } from 'vue-router';
import home from '../components/home.vue'
const routes = [
 {
    path: '/',
    name: 'Home',
    component:  home
  }
]
 
/**
 * 定義返回模組
 */
const router = createRouter({
  history: createWebHashHistory(), 
  routes
})
 
export default router

注意看上面的history，如果設定為createWebHistory()那麼頁面的存取路徑裡面是沒有#的,比如 http://baseUrl/Home；

如果設定為createWebHashHistory()，那頁面的存取路徑就需要帶#，比如 http://baseUrl/#/Home

這兩者區別非常大！！！

像這種前端是搭配後端WebAPI一起使用的，如果URL沒有#這個分隔符，後端服務會將存取的URL路由到相應的控制器上，如果沒有對應的控制器，可想而知，它會送你一個404

但是帶上#就不一樣，URL路由的解析工作是Vue中，由vue-router，這樣你設定的路由，才會正確顯示對應的頁面

這裡猜想，不帶#的這種形式，應該是為了部署在Nginx、Apache這種伺服器使用

最後把Vue專案編譯構建後，生成的檔案放在後端wwwroot資料夾就好了，它會自動解析的

呼叫後端API介面時，可以用axios，然後像這樣丟過去

import axios from "axios";
function logout() {
    let data={
      Msg:'Hello World'
    }
    axios
    .post("api/Home/Hello",data)
    .then((res) => {
      console.log(res);
    })
    .catch((err) => {
      console.log("發生異常：" + err);
    });
}

看看 .post("api/Home/Hello",data)，Post的地址相當於http://baseurl/api/Home/Hello，也就是說沒有出現跨域的情況，前面跨域的設定可有可無

End~

臨時寫了demo：https://files.cnblogs.com/files/iDream2018/VueWithWebAPIdemo.rar?t=1659951302

記得用vite建立vue專案

npm init vite@latest my-vue-app --template vue