Question

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

使用vue cli - 生成html文件...继续获取我的模板中不存在的头标记。

更多细节：

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

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

在我的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>标签 - 我不知道如何摆脱它......

Answer 1

所以......在引擎盖下，正在使用html-webpack。我进入了/build/webpack.prod.conf.js，并将inject设置为false。

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

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

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

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

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

Vue.js Webpack模板头标记

1 个答案: