Vue.js Webpack 模板头标签 [英] Vue.js Webpack template head tag
问题描述
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/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 -
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 模板头标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
