ASP.Net Core与Vue 3项目分离

1.创建ASP.Net Core与React.js项目（因为没有现成模板，就选这个）；

image.png

2.删除文件夹ClientApp里边所有文件;

image.png

3.在.Net项目里边创建一个Vue项目；

image.png

注：Vue创建项目是不允许大写字母的，但我还是习惯大写字母命名，所以创建完我就把文件夹名称改了。

4.安装VueCliMiddleware

image.png

5.修改Startup.cs文件；

• 添加

//Startup.cs

using VueCliMiddleware;

• 修改

//Startup.cs

//configuration.RootPath = "ClientApp/build";
configuration.RootPath = "你的Vue项目名称/build";  //你在步骤3创建的Vue项目文件夹名称

//spa.Options.SourcePath = "ClientApp";
spa.Options.SourcePath = "你的Vue项目名称";

//spa.UseReactDevelopmentServer(npmScript: "start");
//第六个参数设置为true，强制关掉占用的ip进程，不然运行几次就提示ip被占用
spa.UseVueCli(npmScript: "dev", port: 9098, false, ScriptRunnerType.Npm, "running at", true);

• 删除

//Startup.cs

//app.UseHttpsRedirection(); //否则需要配置证书

6.修改项目配置

image.png

<!--<SpaRoot>ClientApp\</SpaRoot>-->
<SpaRoot>你的Vue项目文件夹\</SpaRoot>

7.取消启用SSL；

image.png

注：如果勾选启用 SSL，调试时页面会出问题一直刷新。