Question

我正在开发一个使用VS 2107模板构建的Angular SPA。模板解决方案默认使用Webpack。运行此应用程序时，我从服务器收到以下响应：

<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>MySite</title>
    <base href="/" />

    <link rel="stylesheet" href="/dist/vendor.css?v=GTBoa19X9IFhaihx7ZAnVru_FAmBl9DrU8hiEInbZsk" />
    <script type="text/javascript">
        var appInsights=window.appInsights||function(config){
            function i(config){t[config]=function(){var i=arguments;t.queue.push(function(){t[config].apply(t,i)})}}var t={config:config},u=document,e=window,o="script",s="AuthenticatedUserContext",h="start",c="stop",l="Track",a=l+"Event",v=l+"Page",y=u.createElement(o),r,f;y.src=config.url||"https://az416426.vo.msecnd.net/scripts/a/ai.0.js";u.getElementsByTagName(o)[0].parentNode.appendChild(y);try{t.cookie=u.cookie}catch(p){}for(t.queue=[],t.version="1.0",r=["Event","Exception","Metric","PageView","Trace","Dependency"];r.length;)i("track"+r.pop());return i("set"+s),i("clear"+s),i(h+a),i(c+a),i(h+v),i(c+v),i("flush"),config.disableExceptionTracking||(r="onerror",i("_"+r),f=e[r],e[r]=function(config,i,u,e,o){var s=f&&f(config,i,u,e,o);return s!==!0&&t["_"+r](config,i,u,e,o),s}),t
        }({
            instrumentationKey: 'ba5fc891-eb8c-4a6d-9126-d79556ae0863'
        });

        window.appInsights=appInsights;
        appInsights.trackPageView();

    </script>
</head>
<body> 

<app></app>

<script src="/dist/vendor.js?v=ktEYx3Pf8jICUgoPuQqu7uGMM9Su7Hv398WJvv9P2o4"></script>

    <script src="/dist/main-client.js?v=sEZxwQM4sP47PpPCDWohUTvZ02wu6JusYOT7VGzPDdo"></script>

</body>
</html>

body's content确实有意义，因为index.cshtml是：

@{
    ViewData["Title"] = "Home Page";
}

<app></app>

<script src="~/dist/vendor.js" asp-append-version="true"></script>
@section scripts {
    <script src="~/dist/main-client.js" asp-append-version="true"></script>
}

然而，head根本没有意义。 如何填充与vendor.css和appInsights script？ Webpack是否负责vendor.css？我猜不是，因为它负责构建vendor.css但是我们在HTML中包含它会怎么样？

Answer 1

由vendor.css设置的

_Layout.cshtml。 vendor.css生成webpack。它由msbuild运行。要查看，请找到.csproject，您会发现：

<Target Name="PublishRunWebpack" AfterTargets="ComputeFilesToPublish">
    <!-- As part of publishing, ensure the JS resources are freshly built in production mode -->
    <Exec Command="npm install" />
    <Exec Command="node node_modules/webpack/bin/webpack.js --config webpack.config.vendor.js --env.prod" />
    <Exec Command="node node_modules/webpack/bin/webpack.js --env.prod" />

    <!-- Include the newly-built files in the publish output -->
    <ItemGroup>
      <DistFiles Include="wwwroot\dist\**; ClientApp\dist\**" />
      <ResolvedFileToPublish Include="@(DistFiles->'%(FullPath)')" Exclude="@(ResolvedFileToPublish)">
        <RelativePath>%(DistFiles.Identity)</RelativePath>
        <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
      </ResolvedFileToPublish>
    </ItemGroup>
  </Target>

Angular-Donet是通用的SSR（服务器端渲染）。请参阅here。

由visual studio设置的

AppInsight用于开发目的，请参阅here。如果您使用vscode将无法设置。

根据index.cshtml

1 个答案: