时间戳

首页 > 解决方案 > 使用带有 npm webpack 的 asp-net-core 从 cdn 加载引导程序

c# - 使用带有 npm webpack 的 asp-net-core 从 cdn 加载引导程序

问题描述

当前项目结构截图

从上图中可以看出，我正在实现一个带有 asp-net-core 的网站，并使用 npm 安装了引导程序。

我希望引导程序在登台/生产构建时从 CDN 加载，但我知道唯一的方法是使用标签助手。

当我使用 npm bootstrap 时如何实现这一点？

标签： c#asp.net-corenpmbootstrap-4

解决方案

您可以使用
<environment exclude="Development">
or<environment names="Staging,Production">
或<environment include="Staging,Production"> 从 加载 js 或 css CDN。

从ASP.NET Core 中的 Environment Tag Helper引入

例子

<!DOCTYPE html>
<html lang="en">
<head>
<!-- other head tags -->

<environment include="Development">
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
    <link rel="stylesheet" href="~/css/site.css" />
</environment>

<environment exclude="Development">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
          asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
          asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute"
          integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous" />
    <link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
</environment>
</head>
<body>

<!-- other body content -->
@RenderBody()
<!-- other body content -->

<environment include="Development">
    <script src="~/lib/jquery/dist/jquery.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
    <script src="~/js/site.js" asp-append-version="true"></script>
</environment>

<environment exclude="Development">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"
            asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
            asp-fallback-test="window.jQuery"
            crossorigin="anonymous"
            integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT">
    </script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"
            asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"
            asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal"
            crossorigin="anonymous"
            integrity="sha384-xrRywqdh3PHs8keKZN+8zzc5TX0GRTLCcmivcbNJWm2rs5C8PRhcEn3czEjhAO9o">
    </script>
    <script src="~/js/site.js" asp-append-version="true"></script>
</environment>

@RenderSection("Scripts", required: false)
</body>
</html>

来自在 ASP.NET Core 3.0 中使用带有后备脚本的 CDN 中的 jQuery 和 Bootstrap 的回答

推荐阅读