Question

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

index.html

<base href="/">

每次构建时手动开发版本（VS-> href =“ /”-> IIS Express），然后进行构建 Visual Studio的正式版发布（VS-> href =“ / ProjectName /”->右键单击Project-> Publish ...），我相信这没有道理！

当我通过VS发布功能发布并构建角度项目时，我无法访问此命令，

ng build --prod --base-href / ProjectName /或此命令的任何其他类型

我正在寻找一种解决方案，可以通过配置或类似方法来解决此问题。

非常感谢！

Answer 1

因此，基于@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 2

将其添加到package.json以构建脚本 “ build”：“ ng build --prod --aot --base-href / ProjectName /”

Answer 3

我在Angular8项目中使用.net核心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运行构建---prod --base-href / BaseHrefUrl /

ng构建“ --prod”“ --base-href”“ / BaseHrefUrl /”

如何通过Visual Studio Publish为Angular Project定义<base href =“ / ProjectName /” />？

3 个答案: