Vue.js Webpack 模板头标签

本文介绍了Vue.js Webpack 模板头标签的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

使用 vue cli - 生成 html 文件...不断获取模板中不存在的 head 标签.

更多细节:

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

我有一个 Vue SPA/小部件(使用视图 cli 和 vue webpack 构建)，它必须位于 Nunjunks 呈现的 html 中.

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

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

我的 index.html 文件(从中生成paintpicker.html)如下所示:

{% 扩展 'layout/web-layout.html' %}{% 块主要 %}<div id="应用程序"></div>{% 结束块 %}

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

<link href=/static/css/app.1de2d621551be454289c9d7cf89d0ded.css rel=stylesheet>{% 扩展 'layout/web-layout.html' %}{% 块主要 %}<div id=app></div>{% 结束块 %}<script type=text/javascript src=/static/js/manifest.2ae2e69a05c33dfc65f8.js></script><script type=text/javascript src=/static/js/vendor.158e5ebf7c414a428726.js>脚本><script type=text/javascript src=/static/js/app.99b16fc5705b655dd61b.js></script>

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

解决方案

所以...在幕后，正在使用 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 部分.

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

Using vue cli - generating html file... keep getting a head tag which doesn't exist in my template.

More detail:

I have an existing application - written in hapi.js. It serves up rendered html pages. Nunjunks is used for templating.

I have a Vue SPA / widget (built using view cli, and vue webpack) that must sit within the Nunjunks rendered html.

In my nunjunks template, I have a partial {% include 'vueapps/paintpicker.html' %}

I have set config/index.js to output the file as paintpicker.htmlinto the vueapps directory.

my index.html file (from which paintpicker.html is generated) looks like this:

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

However... once built, my paintpicker.html file looks like this (I've added new lines to make it easier to read).

<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>

I'm receiving a <head> tag - and I don't know how I can get rid of it...

解决方案

So... under the hood, html-webpack is being used. I went into /build/webpack.prod.conf.js, and set inject to false.

Then, taking variables from this template -

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

I was able to insert them into my template. The result now renders as required.

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

See the section on webpack.config.js for info.

这篇关于Vue.js Webpack 模板头标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！