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

Question

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

index.html

<base href="/">

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

N.B。当我通过 VS 发布功能发布和构建 angular 项目时，我无法访问此命令，

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

或此命令的任何不同类型

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

非常感谢！

Answer 1

将其添加到 package.json 用于构建脚本 "build":

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

Answer 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在IIS上发布它。

Answer 3

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

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

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

步骤：

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

用于根据构建配置参数设置 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>

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

根据选择条件设置 BaseHref

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

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

Answer 4

扩展拉维上面的回答。我必须将条件语句嵌套在 csproj 的

<Target Name="PublishRunWebpack" AfterTargets="ComputeFilesToPublish">
<!-- As part of publishing, ensure the JS resources are freshly built in production mode -->
  <PropertyGroup>
      <BaseHref Condition="'$(Configuration)' == 'Debug' Or '$(Configuration)' == 'Release'">/MyDefaultRoot/</BaseHref>
      <BaseHref Condition="'$(Configuration)' == 'QA'">/MyDefaultRootQA/</BaseHref>
  </PropertyGroup>
<Exec WorkingDirectory="$(SpaRoot)" Command="npm install" />
<Exec WorkingDirectory="$(SpaRoot)" Command="npm run build -- --prod --base-href $(BaseHref)" />

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

How Define <base href="/ProjectName/"> for Angular Project By Visual Studio Publish?

publish

build

visual-studio

.net-core

angular