asp.net core 引入vue工程

1、创建一个API项目 （其他模版也可以，使用React.JS模版更方便更改）

1.png

2、项目目录下创建一个ClientApp目录用来存放vue工程

2.png

2.1 正常的vue项目创建后 build之后的目录文件夹为dist，通过配置vue.config.js文件可更改为发布目录名为build，也可以不更改，更改是为了和asp.net core react模版创建的工程统一。如不更改时后边配置.net core 项目文件时讲build路径更换为dist即可。更改方式如下：

module.exports = {
    outputDir: "build",//vue项目build 发布后生成的目录名称
    devServer: {
        port: 9632, //vue项目开发环境下运行时的端口
    },
    "transpileDependencies": [
        "vuetify"
    ],
}

3、修改.net core 项目文件（项目名称上右键->编辑项目文件）

注意事项写在注释里

<Project Sdk="Microsoft.NET.Sdk.Web">

  <PropertyGroup>
    <TargetFramework>netcoreapp3.1</TargetFramework>
    <TypeScriptCompileBlocked>true</TypeScriptCompileBlocked>
    <TypeScriptToolsVersion>Latest</TypeScriptToolsVersion>
    <IsPackable>false</IsPackable>
    <SpaRoot>ClientApp\</SpaRoot> <!-- ClientApp对应vue工程的根目录名 -->
    <DefaultItemExcludes>$(DefaultItemExcludes);$(SpaRoot)node_modules\**</DefaultItemExcludes>
  </PropertyGroup>
  <!-- 不重要 是我项目里需要引用的包 start-->
  <ItemGroup>
    <PackageReference Include="Microsoft.VisualStudio.Web.CodeGeneration.Design" Version="3.1.4" />
    <PackageReference Include="QRCoder" Version="1.3.9" />
  </ItemGroup>
  <!-- 不重要 是我项目里需要引用的包 end-->

  <!--引入单页面应用扩展包 start-->
  <ItemGroup>
    <PackageReference Include="Microsoft.AspNetCore.SpaServices.Extensions" Version="3.1.2" />
  </ItemGroup>
  <!--引入单页面应用扩展包 end-->

<!-- 设置发布项目时的配置 statr -->
  <Target Name="PublishRunWebpack" AfterTargets="ComputeFilesToPublish">
    <!-- cnpm 可更换为npm -->
    <Exec WorkingDirectory="$(SpaRoot)" Command="cnpm install" />
    <Exec WorkingDirectory="$(SpaRoot)" Command="cnpm run build" />

    <ItemGroup>
      <!-- 此处的build 路径 对应上方2.1里提到的vue发布目录， 如未更改则需要把此处build 更换为dist -->
      <DistFiles Include="$(SpaRoot)build\**" />
      <ResolvedFileToPublish Include="@(DistFiles->'%(FullPath)')" Exclude="@(ResolvedFileToPublish)">
        <RelativePath>%(DistFiles.Identity)</RelativePath>
        <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
        <ExcludeFromSingleFile>true</ExcludeFromSingleFile>
      </ResolvedFileToPublish>
    </ItemGroup>
  </Target>
<!-- 设置发布项目时的配置 end -->
</Project>

4、配置Startup.cs 文件

1. 修改ConfigureServices方法

        public void ConfigureServices(IServiceCollection services) {
            services.AddControllersWithViews();
            //services.AddControllers();
            services.AddSpaStaticFiles(config => {
                config.RootPath = "ClientApp/build"; //此处build 对应vue项目的发布文件夹名。
                                                        //如未配置vue项目的build文件夹名，则需修改为dist
            });
        }

2.修改Configure方法

        public void Configure(IApplicationBuilder app, IWebHostEnvironment env) {
            if (env.IsDevelopment()) {
                app.UseDeveloperExceptionPage();
            }

            app.UseRouting();

            app.UseAuthorization();

            //app.UseEndpoints(endpoints => {
            //    endpoints.MapControllers();
            //});
            #region 添加单页面web应用  vue
            app.UseStaticFiles();
            app.UseSpaStaticFiles();

            app.UseEndpoints(options => {
                options.MapControllerRoute(
                    name: "default",
                    pattern: "{controller}/{action=index}/{id?}"
                    );
            });

            app.UseSpa(spa => {
                spa.Options.SourcePath = "ClientApp";
                if (env.IsDevelopment()) {
                    //此处配置为调试时从外部引入vue项目，也就是说在运行asp.net core前需要先启动你的vue项目
                    spa.UseProxyToSpaDevelopmentServer("http://localhost:9632"); 
                }
            });
            #endregion

        }