如何使用ASP.NET / Razor局部函数将Vue / Webpack捆绑包注入Webpack HTML模板

Question

我正在尝试将VueJS添加到旧版ASP.NET应用程序中。为此，我希望使用Razor的@Html.Partial()方法将Vue的webpack生成的CSS和JS文件注入到旧版应用程序中每个页面上使用的现有复杂Razor布局模板文件的页眉和正文中。

[为了支持多个Webpack入口点（覆盖页面），我们将Vue CLI v3的pages功能与以下pages文件结合使用，以生成供应商，通用和应用程序Webpack块为目标。

vue.config.js

模板文件

var fs = require("fs");
var path = require("path");

// Can be Vue App or Shared bundles
var appBasePath = "./src/apps/";

var template = path.resolve(__dirname, "src", "index.razor.ejs");
console.log("template=", template);

var pages = {};
// We search for index.js files inside basePath folder and make those as entries
fs.readdirSync(appBasePath).forEach(function(name) {
  var appMainJS = `${appBasePath}${name}/main.ts`; // entry point
  var outputHtml = `${name}.html`; // partial Head & Body

  console.log(appMainJS);
  console.log(outputHtml);

  if (fs.existsSync(appMainJS)) {
    pages[name] = {
      // entry for the app
      entry: appMainJS,
      // source template  - might be relative to ./public ???
      template,
      // output HMTL
      filename: outputHtml,
      inject: false,
      minify: false,
      // when using title option,
      // template title tag needs to be <title><%= htmlWebpackPlugin.options.title %></title>
      // title: name,
      // chunks to include on this page, by default includes
      // extracted common chunks and vendor chunks.
      chunks: ["chunk-vendors", "chunk-common", "index"], 
    };
  }
});

module.exports = {
  pluginOptions: {
    quasar: {
      treeShake: true
    }
  },
  transpileDependencies: [/[\\\/]node_modules[\\\/]quasar[\\\/]/],
  pages
};

是./src/index.razor.ejs的Webpack模板，用于发出Razor部分HTML文件，该文件接受HTML Webpack Plugin移动值以插入Header标签，或true插入Body标签。

false

由于发出的Razor部分HTML的所需结构，我不能使用webpack的

@model System.Boolean

@if(Model)
{
  <% for (var css in htmlWebpackPlugin.files.css) { %>
    <link href="<%= htmlWebpackPlugin.files.css[css] %>" rel="stylesheet">
  <% } %>
} else {
  <% if (htmlWebpackPlugin.options.appMountId) { %>
    <div id="<%= htmlWebpackPlugin.options.appMountId%>"></div>
    <% } %>

    <% if (htmlWebpackPlugin.options.appMountIds && htmlWebpackPlugin.options.appMountIds.length > 0) { %>
    <% for (var index in htmlWebpackPlugin.options.appMountIds) { %>
    <div id="<%= htmlWebpackPlugin.options.appMountIds[index]%>"></div>
    <% } %>
    <% } %>

    <% if (htmlWebpackPlugin.options.window) { %>
    <script>
      <% for (var varName in htmlWebpackPlugin.options.window) { %>
        window['<%=varName%>'] = <%= JSON.stringify(htmlWebpackPlugin.options.window[varName]) %>;
      <% } %>
    </script>
    <% } %>

    <% for (var chunk in htmlWebpackPlugin.files.chunks) { %>
    <script src="<%= htmlWebpackPlugin.files.chunks[chunk].entry %>"></script>
    <% } %>

    <% if (htmlWebpackPlugin.options.devServer) { %>
    <script src="<%= htmlWebpackPlugin.options.devServer%>/webpack-dev-server.js"></script>
    <% } %>
}

设计为使用的传统HTML文件。遗憾的是，模板ABOVE仅会发出供应商和普通块。我尝试使用此替代模板，但不发出任何东西...

HTML Webpack Plugin

BTW ...官方示例使用

@model System.Boolean

@if (Model)
{
  <%= htmlWebpackPlugin.headTags %>
} else {
  <%= htmlWebpackPlugin.bodyTags %>
}

和htmlWebpackPlugin.tags.headTags，但是会抛出htmlWebpackPlugin.tags.bodyTags未定义的异常。

Answer 1

我知道有点晚..但是我有同样的问题。