如何通过 Visual Studio Publish 为 Angular 项目定义 <base href="/ProjectName/">？答案

【问题标题】：How Define <base href="/ProjectName/"> for Angular Project By Visual Studio Publish?如何通过 Visual Studio Publish 为 Angular 项目定义 <base href="/ProjectName/">？
【发布时间】：2019-04-03 20:20:16
【问题描述】：

我有一个 .Net Core API 项目，其中包含一个 Angular 版本 7 项目，所以我不想每次手动更改 index.html 源代码，

index.html

<base href="/">

每次构建时手动开发版本（VS -> href ="/" -> IIS Express ）然后构建 Visual Studio 发布的生产版本（VS-> href="/ProjectName/" -> 右键单击项目 -> 发布...），我认为这没有意义！

注意当我通过 VS 发布功能发布和构建 Angular 项目时，我无法访问此命令，

ng build --prod --base-href /ProjectName/

或任何不同类型的此命令

我正在寻找一种通过配置或类似方式来处理此问题的解决方案。

非常感谢！

【问题讨论】：

标签： angular visual-studio build .net-core publish

【解决方案1】：

将其添加到 package.json 以用于构建脚本 “构建”：

ng build --prod --aot  --base-href /ProjectName/

【讨论】：

【解决方案2】：

所以基于@savinn 的解决方案，它工作得很好，我尝试再解释一次解决方案，

在 Angular 项目 veriosn 7 中，我有 index.hmtl，像这样

index.html

<base href="/">

它可以在 IIS Express (F5) 上以开发模式运行应用程序，

但对于生产模式，您需要像这样定义项目名称

index.html

  <base href="/ProjectName/">

但您无法每次都更改它并签入您的源代码，因此您可以根据@savinn 解决方案设置

package.json

 "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build --prod --aot --base-href /ProjectName/",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },

现在，当您通过 Visual Studio 2017 在 IIS 上发布项目时，它会运行此 ng 构建，并且在 IIS 上发布的 index.html 文件中您可以看到此

在 IIS 上发布 index.html，ClientApp\dist\index.html

 <base href="/ProjectName/">

所以在不改变 index.html 的情况下，您可以将应用程序作为开发模式运行，并通过 VS publish 在 IIS 上发布。

【讨论】：

【解决方案3】：

我在 Angular8 项目中使用 .net core MVC。

供参考：https://docs.microsoft.com/en-us/aspnet/core/client-side/spa/angular?view=aspnetcore-3.1&tabs=visual-studio

我更新了用于设置 npm 构建操作的 base-href 的 csproj 文件。

步骤：

在 csproj 中使用 <Choose> <When> msbuild 元素

用于根据 Build Configuration 参数设置 base-href 变量。

<Choose>
<When Condition="'$(Configuration)' == 'Debug' Or '$(Configuration)' == 'Release'">
  <PropertyGroup>
    <BaseHref>/</BaseHref>
  </PropertyGroup>
</When>   
<When Condition="'$(Configuration)' == 'environment'">
  <PropertyGroup>
    <BaseHref>/BaseHrefUrl/</BaseHref>
  </PropertyGroup>
</When></Choose>

<BaseHref> 是自定义元素

在 npm build 中使用 BaseHref 作为参数

<Target Name="PublishRunWebpack" AfterTargets="ComputeFilesToPublish">

  <!-- As part of publishing, ensure the JS resources are freshly built in production mode -->

  <Exec WorkingDirectory="$(SpaRoot)" Command="npm install" />
  <Exec WorkingDirectory="$(SpaRoot)" Command="npm run build -- --prod --base-href $(BaseHref)" />
  <Exec WorkingDirectory="$(SpaRoot)" Command="npm run build:ssr -- --prod" Condition=" '$(BuildServerSideRenderer)' == 'true' " />

  <!-- Include the newly-built files in the publish output -->
  <ItemGroup>
    <DistFiles Include="$(SpaRoot)dist\**; $(SpaRoot)dist-server\**" />
    <DistFiles Include="$(SpaRoot)node_modules\**" Condition="'$(BuildServerSideRenderer)' == 'true'" />
    <ResolvedFileToPublish Include="@(DistFiles->'%(FullPath)')" Exclude="@(ResolvedFileToPublish)">
      <RelativePath>%(DistFiles.Identity)</RelativePath>
      <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
      <ExcludeFromSingleFile>true</ExcludeFromSingleFile>
    </ResolvedFileToPublish>
  </ItemGroup>
</Target>

将构建配置更改为特定环境。

根据Choose When条件设置BaseHref

npm run build -- --prod --base-href /BaseHrefUrl/

ng build "--prod" "--base-href" "/BaseHrefUrl/"

【讨论】：