.NET Core與Vue3組合開發技_第01天_專案的創建及配置_如何修改預設vue 預設port 8080
在此都先假定你已經環境安裝好vs2022,.net6以上
以及nodejs,npm,vue3 cli等諸多工具了
尚未安裝的在補安裝好vue cli
npm install -g @vue/cli
在Vue3開發專案的創建方式有以下幾種
方法1.藉由vue-cli
vue create 專案名稱(也會自動建立目錄)
要運行在透過npm run serve即可
方法2.透過visual studio ide來創建(背後也是透過方法1.藉由vue-cli)
在空方案中右鍵新增vue專案(可搜尋關鍵字vue)找到獨立的
其他preview是有和asp.net core整併的專案版本
在此要勾消若有勾選擇代表會把asp.net core整併一起
基本上背後也是透過vue cli在幫我們create專案而且產生的專案目錄也一樣
基本上可直接按綠色執行撥放按鍵來跑專案
方法3.會自動安裝並執行create-vue 這是vue官網cli工具，會透過Vite來創建
npm init vue@latest
可能暫時就不討論此方式
在空方案中去新建另一個asp.net core web api專案
接著要來配置後端web api的跨域
前端已經是8080的埠號
後端部分也要固定好埠號
這裡專案給的是44037
由於瀏覽器存在同源政策的機制
因此會將相異port應用之間存取默認是不被允許的
至Program.cs中
builder.Services.AddControllers();
的上方去配置
允許所有請求Header與Method
以及相應中間件的設置
Program.cs
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | var builder = WebApplication.CreateBuilder(args); builder.Services.AddCors(options => { options.AddDefaultPolicy( builder => { builder.WithOrigins("http://localhost:8080").AllowAnyHeader().AllowAnyMethod(); }); }); // Add services to the container. builder.Services.AddControllers(); // Learn more about configuring Swagger/OpenAPI at https://aka.ms/aspnetcore/swashbuckle builder.Services.AddEndpointsApiExplorer(); builder.Services.AddSwaggerGen(); var app = builder.Build(); // Configure the HTTP request pipeline. if (app.Environment.IsDevelopment()) { app.UseSwagger(); app.UseSwaggerUI(); } app.UseHttpsRedirection(); app.UseCors(); app.UseAuthorization(); app.MapControllers(); app.Run(); |
在此要再補充若預設vue的port有跟應用服務有衝突
也是8080的port
像我本機的MySQL 由於預設8080的port number
就剛好跟Vue3的衝突
方法1.去package.json 文件中修改 scripts
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"scripts": {
"serve": "vue-cli-service serve --port 9090",
"build": "vue-cli-service build",
},
改完要重新運行一次專案
方法2.啟用命令用
npm run serve --port 9090
方法3.在根目錄創建vue.config.js
module.exports = {
devServer: {
port: 9090
}
}
留言
張貼留言