Question

是否可以在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 %}

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

然后，因为我必须将静态信息收集到settings.py中的static/vue目录，所以我添加了一个新目录：

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']}
    # ...
]

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

在vue-cli中对public / index.html进行调整

2 个答案: