时间戳

首页 > 解决方案 > 在 vue-cli 中调优 public/index.html

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

问题描述

是否可以配置注入文件的位置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

解决方案

我已经找到了如何做到这一点，首先需要禁用文件注入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']}
    # ...
]

推荐阅读