如何在Visual Studio 2017项目的_Layout.cshtml中引用npm安装的JS包？

嘿，我来帮你搞定这个问题！首先得搞清楚：通过npm安装的包默认是存在项目根目录的node_modules文件夹里，而不是你找的wwwroot/lib/dist——这就是为啥你在wwwroot里找不到文件的原因。下面给你几个实用的解决方案，按需选就行：

方案1：直接引用node_modules里的文件（快速测试首选） #

你可以直接在_Layout.cshtml里写路径引用node_modules中的文件，比如：

<!-- 先引jQuery，Bootstrap依赖它 -->
<script src="~/node_modules/jquery/dist/jquery.min.js"></script>
<!-- 再引Popper.js，Bootstrap的弹窗、下拉菜单需要它 -->
<script src="~/node_modules/@popperjs/core/dist/umd/popper.min.js"></script>
<!-- 最后引Bootstrap的JS文件 -->
<script src="~/node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- 如果需要Bootstrap的样式，别忘了加CSS引用 -->
<link rel="stylesheet" href="~/node_modules/bootstrap/dist/css/bootstrap.min.css" />

不过要注意，ASP.NET Core默认不让直接访问node_modules文件夹，得在配置里开个权限：

• 如果你用的是.NET 6+，打开Program.cs，在app.UseStaticFiles();后面加这段代码：

app.UseStaticFiles(new StaticFileOptions
{
    FileProvider = new PhysicalFileProvider(
        Path.Combine(Directory.GetCurrentDirectory(), "node_modules")),
    RequestPath = "/node_modules"
});

• 要是老版本的ASP.NET Core，就去Startup.cs的Configure方法里加同样的代码。

方案2：用构建工具把文件复制到wwwroot（生产环境规范做法） #

如果是正式项目，更推荐用官方的LibMan工具把需要的文件从node_modules复制到wwwroot/lib，步骤很简单：

1. 右键你的项目 → 选择「添加」→「客户端库」
2. 在弹出的窗口里，源选「npm」，分别搜索jquery、bootstrap、@popperjs/core
3. 选好你安装的对应版本，目标位置设为wwwroot/lib/[包名]（比如wwwroot/lib/jquery），然后点安装
4. 安装完成后，wwwroot/lib里就有这些文件了，之后在_Layout.cshtml里引用就行：

<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/@popperjs/core/dist/umd/popper.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.min.js"></script>

方案3：用CDN引用（最省心的生产环境方案） #

要是不想折腾本地文件，直接用CDN链接也香，还能利用浏览器缓存加速加载：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.0/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js"></script>

记得把版本号换成你npm安装的那个，避免出现兼容性问题哦。

内容的提问来源于stack exchange，提问作者johnny