在 vue-cli 中调优 public/index.html答案

【问题标题】：public/index.html tuning in vue-cli在 vue-cli 中调优 public/index.html
【发布时间】：2019-06-20 04:29:20
【问题描述】：

是否可以在public/index.html 中配置注入文件位置？
我想生成一个 django 模板而不是提供的简单 html 文件，它可能看起来像这样：

{% 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 %}

【问题讨论】：

标签： vue-cli

【解决方案1】：

我已经找到方法了，首先需要禁用vue.config.js中的文件注入：

configureWebpack: config => {
  config.plugins.forEach((plugin) => {
    if(plugin.constructor.name === 'HtmlWebpackPlugin') {
      plugin.options.inject = false;
      plugin.options.minify.collapseWhitespace = false;
    }
  });
}

接下来需要使用下划线模板插入 js / css 文件。
在这里，我在文件名之前添加了vue，因为我使用 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 %}

然后，由于我必须将静态收集到static/vue 目录，在 settings.py 我添加了一个新目录：

STATICFILES_DIRS = [
    # vue is an additional subdirectory for vue static
    ('vue', os.path.join(BASE_DIR, '../frontend/dist')),
]

还需要从 django 访问 vue 生成的模板，所以在 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']}
    # ...
]

【讨论】：

【解决方案2】：

谢谢

如果有人更喜欢 webpack 链式方式：

  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'))
      }
    })
  }

【讨论】：