如何在Asp.Net+Vue.js中通过Webpack引用manifest.json至CSHTML

这个问题我刚好处理过，给你一套靠谱的落地方案！核心思路是在CSHTML里用C#代码读取Webpack生成的manifest.json，解析出带哈希的资源文件名后，动态渲染到页面中，这样每次构建后的哈希变化都会自动同步到视图里。

步骤1：确保Webpack正确生成manifest.json #

如果还没配置相关插件，你需要用webpack-manifest-plugin来生成标准的manifest文件。在你的webpack.config.js中添加以下配置：

const ManifestPlugin = require('webpack-manifest-plugin');

module.exports = {
  // 你的其他Webpack配置（entry、output、module等）
  plugins: [
    // 生成manifest.json
    new ManifestPlugin({
      fileName: 'manifest.json', // 输出的文件名
      basePath: 'dist/', // 资源所在的基础路径，和你的output路径对应
      publicPath: '' // 根据实际部署路径调整，确保资源链接正确
    }),
    // 别忘了Vue相关的插件，比如VueLoaderPlugin
  ]
};

执行构建后，dist文件夹里就会生成你示例格式的manifest.json了。

步骤2：在CSHTML中动态读取并引入资源 #

在你的index.cshtml里，通过C#代码读取manifest文件，解析后动态渲染资源链接：

@using System.IO
@using System.Text.Json

@{
    // 定义manifest文件的路径，根据你的项目结构调整，这里假设dist在wwwroot下
    var manifestFilePath = Path.Combine(Directory.GetCurrentDirectory(), "wwwroot/dist/manifest.json");
    
    // 兼容开发环境：开发模式下可能没生成带哈希的资源和manifest
    if (!File.Exists(manifestFilePath))
    {
        <text>
            <!-- 开发环境直接用固定文件名 -->
            <link rel="stylesheet" type="text/css" href="dist/main.css">
            <script src="dist/main.js"></script>
        </text>
    }
    else
    {
        // 读取并解析manifest.json
        var manifestJson = File.ReadAllText(manifestFilePath);
        var manifest = JsonSerializer.Deserialize<Dictionary<string, string>>(manifestJson);
        
        <!-- 动态渲染带哈希的资源链接 -->
        <link rel="stylesheet" type="text/css" href="dist/@manifest["main.css"]">
        <script src="dist/@manifest["main.js"]"></script>
    }
}

关键注意事项 #

• 路径正确性：一定要根据你的项目结构调整manifestFilePath，比如如果dist不在wwwroot下，要修改路径组合的逻辑。
• 缓存处理：生产环境中，建议给manifest.json设置严格的缓存策略（比如禁用缓存），避免浏览器缓存旧的manifest导致资源不更新。你可以在ASP.NET的静态文件配置里添加：

  app.UseStaticFiles(new StaticFileOptions
  {
      OnPrepareResponse = ctx =>
      {
          if (ctx.File.Name == "manifest.json")
          {
              ctx.Context.Response.Headers.Append("Cache-Control", "no-cache, no-store, must-revalidate");
              ctx.Context.Response.Headers.Append("Expires", "0");
          }
      }
  });
  

• 环境区分：你也可以通过ASP.NET的环境变量做更精准的判断，比如用@if (Environment.IsDevelopment())来单独处理开发模式的资源引入逻辑。

这样就能彻底解决每次构建后哈希变化需要手动修改资源链接的麻烦啦！

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