VS2022 轉 VSCODE - daniel-qa/Vue GitHub Wiki

VS2022 轉 VSCODE

執行後端

dotnet run <YourProject>.csproj

執行前端

進入 ClientApp 資料夾後執行

 npm run serve

執行順序會影響開發體驗，尤其是在開發模式下：

建議順序：

先啟動前端（Vue 開發伺服器，npm run serve），等 http://localhost:8080 可以正常開啟。

再啟動後端（.NET Core API）。

VSCode 打開的資料夾要正確：VS Code 開啟的要是包含 package.json 和 .vscode 的資料夾。

設定 task.json

Properties\launchSettings.json (VS2022)

建立 .vscode/launch.json

這段設定會讓你在 VS Code 裡點選「開始除錯（F5）」時，自動執行 npm run serve

在專案根目錄建立 .vscode 資料夾。(包含 package.json 或 .csproj 的那一層)
新增 .vscode/launch.json 檔案，加入設定如下：

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "pwa-node",
      "request": "launch",
      "name": "npm: serve",
      "runtimeExecutable": "npm",
      "runtimeArgs": ["run", "serve"],
      "cwd": "${workspaceFolder}",
      "console": "integratedTerminal"
    }
  ]
}

執行 npm run serve 時，NPM 會去找 scripts 裡對應的 "serve"，然後執行右邊那串指令：vue-cli-service serve。這就是為什麼它們的效果是一樣的。

這段設定會讓你在 VS Code 的「Run and Debug」介面中看到一個叫做 “npm: serve” 的選項，點擊後就能啟動 vue-cli-service serve，

相當於在終端機輸入 npm run serve。

如果你要進行更進階的除錯（例如附加到 Vue 元件的前端程式碼），可能還需要加上 Chrome Debugger 的支援，我可以幫你設定 VS Code 配合 Chrome 來做前端除錯喔

scripts 裡面的這幾行代表你專案在執行開發、建置與檢查語法時所使用的指令：

serve：使用 vue-cli-service serve，這是 Vue CLI 的啟動方式，會啟動本地開發伺服器（通常在 localhost:8080）。
build：用來建置專案，這裡特別加上了 NODE_OPTIONS=--openssl-legacy-provider，通常是為了解決 Node.js 與某些依賴庫在加密模組方面的相容性問題。
lint：進行程式碼風格與錯誤檢查，依賴 ESLint 設定。

這些腳本就是你在終端機裡輸入 npm run serve 時，背後實際執行的命令。它們清楚地指出你這個專案是使用 Vue CLI 的建構流程，不是 Vite。

"scripts": {
        "serve": "vue-cli-service serve",
        "build": "set NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service build",
        "lint": "vue-cli-service lint"
    },

所以當你點擊「Run」時，IDE 幫你執行的是 npm run serve，也就是 Vue CLI 的開發伺服器。

1 . 先確認有安 .NET SDK

dotnet --verison
9.0.300

p.s .NET SDK，裡面就有安裝 ASP.NET CORE

2 . 在專案資料夾 ( 有 .csproj ) 執行

dotnet build

成功，再執行

dotnet run

執行 dotnet run 命令時，預設會使用 launchSettings.json 中的 Project 配置，這通常是專案的主要啟動配置。

在這個文件中，您可以看到多個配置（如 IIS Express、TEAMModelBI 和 WSL），但 dotnet run 會針對 Project 配置進行執行。

ex:

"TEAMModelBI": {
      "commandName": "Project",
      "launchBrowser": true,
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      },
      "applicationUrl": "https://localhost:5001;http://localhost:5000"
    },

dotnet run 有問題的話，

一樣先執行 npm run build 檢查

或執行 npm run serve