public/index.html tuning in vue-cli - vue-cli

Question

Is it possible to configure injected files places in public/index.html?
I want to generate a django template instead of simple html file provided, it could look like this:
{% extends 'base.html' %}
{% block header_extra %}
<!-- app.css -->
{% endblock %}
{% block js_extra %}
<!-- app.js, chunk-vendors.js, etc -->
{% endblock %}
{% block main_content %}
<div id="app"></div>
{% endblock %}

Answer 1

I've found how to do it, first it's required to disable files injecting in vue.config.js:
configureWebpack: config => {
config.plugins.forEach((plugin) => {
if(plugin.constructor.name === 'HtmlWebpackPlugin') {
plugin.options.inject = false;
plugin.options.minify.collapseWhitespace = false;
}
});
}
For the next it's needed to insert js / css files using underscore templating.
Here I'm prepending vue before file names, cause I collect static with django.
{% extends 'base.html' %}
{% load static %}
{% block header_extra %}
<% htmlWebpackPlugin.files.css.forEach((fileName) => { %>
<link rel="stylesheet" href="{% static 'vue<%= fileName %>' %}">
<% }) %>
{% endblock %}
{% block js_extra %}
<% htmlWebpackPlugin.files.js.forEach((fileName) => { %>
<script src="{% static 'vue<%= fileName %>' %}"></script>
<% }) %>
{% endblock %}
{% block main_content %}
<div id="app"></div>
<!--
<pre id="config">
<%= JSON.stringify(htmlWebpackPlugin, null, 2) %>
</pre>
-->
{% endblock %}
Then, cause I have to collect static to static/vue directory, in settings.py I added a new dir:
STATICFILES_DIRS = [
# vue is an additional subdirectory for vue static
('vue', os.path.join(BASE_DIR, '../frontend/dist')),
]
Also it's needed to have an access to the vue generated template from django, so in settings.py:
TEMPLATES = [
# ...
# 'frontend' is the vue project directory name,
# so you should be able to specify template like this:
# template_name='dist/index.html'
{'DIRS': ['frontend']}
# ...
]

Answer 2

Thanks
If someone prefers the webpack chain way:
chainWebpack: (config) => {
config.plugins.values().forEach( p => {
if (p.get('plugin').name === 'HtmlWebpackPlugin') {
// console.log(p.get('args'))
p.tap(args => [ merge(args[0], {
inject: false,
})]);
// console.log(p.get('args'))
}
})
}