Vue.js Webpack 模板头标签答案

【问题标题】：Vue.js Webpack template head tagVue.js Webpack 模板头标签
【发布时间】：2018-10-15 06:04:03
【问题描述】：

https://github.com/vuejs-templates/webpack/

使用 vue cli - 生成 html 文件...不断收到我的模板中不存在的 head 标签。

更多细节：

我有一个现有的应用程序 - 用 hapi.js 编写。它提供呈现的 html 页面。 Nunjunks 用于模板。

我有一个必须位于 Nunjunks 呈现的 html 中的 Vue SPA/小部件（使用 view cli 和 vue webpack 构建）。

在我的 nunjunks 模板中，我有一个部分 {% include 'vueapps/paintpicker.html' %}

我已经设置config/index.js将文件作为paintpicker.html输出到vueapps目录中。

我的 index.html 文件（从中生成 paintpicker.html）如下所示：

{% extends 'layout/web-layout.html' %}
{% block main %}
     <div id="app"></div>
{% endblock %}

但是...一旦构建完成，我的paintpicker.html 文件看起来像这样（我添加了新行以使其更易于阅读）。

<head>
<link href=/static/css/app.1de2d621551be454289c9d7cf89d0ded.css rel=stylesheet>
</head>
{% extends 'layout/web-layout.html' %} 
{% block main %}
<div id=app></div>
{% endblock %}
<script type=text/javascript src=/static/js/manifest.2ae2e69a05c33dfc65f8.js></script><script type=text/javascript src=/static/js/vendor.158e5ebf7c414a428726.js></script>
<script type=text/javascript src=/static/js/app.99b16fc5705b655dd61b.js></script>

我收到了一个<head> 标签 - 我不知道如何才能摆脱它...

【问题讨论】：

标签： webpack vue.js

【解决方案1】：

所以...在后台，正在使用 html-webpack。我进入 /build/webpack.prod.conf.js，并将注入设置为 false。

然后，从这个模板中获取变量 -

https://github.com/jaketrent/html-webpack-template/blob/86f285d5c790a6c15263f5cc50fd666d51f974fd/index.html

我能够将它们插入到我的模板中。结果现在根据需要呈现。

https://github.com/jantimon/html-webpack-plugin

有关信息，请参阅 webpack.config.js 部分。

【讨论】：