如何配置 Vue-CLI 3 以生成没有 JavaScript 的页面？

Question

我有一个不需要 JavaScript 的静态页面。我正在使用 vue-cli 3 并想通过 webpack 传递 HTML 文件以进行缩小。然而，这似乎是不可能的。在 vue.config.js 里面，我有这个：

module.exports = {
  pages: {
    static_page: {
      template: "./public/static_page.html",
      entry: ""
    }
  }
};

当然，这个失败了，因为entry是必须的，不能为空。简单地将文件放入 public 将导致 vue-cli 将文件原封不动地复制到 dist 中。这没关系，但它没有缩小。那么我如何告诉 vue-cli 在没有 JavaScript 的情况下处理 HTML 文件？

Answer 1

我不得不手动调用 HTML Webpack 插件。这是我的 vue.config.js

const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
    configureWebpack: {
        plugins: [
            new HtmlWebpackPlugin({
                template: "./public/static_page.html",
                filename: "static_page.html",
                chunks: [],
                minify: {
                    collapseWhitespace: true,
                    removeComments: true,
                    removeRedundantAttributes: true,
                    removeScriptTypeAttributes: true,
                    removeStyleLinkTypeAttributes: true,
                    useShortDoctype: true
                }
            })
        ]
    }
};

Vue CLI 仍在将文件从 public 复制到 dist 不变 as it would with any other static asset。 HTML Webpack 插件正在用缩小版本覆盖此文件。

此外，将 minify 选项设置为 true 似乎没有任何作用。选项必须明确列出。参见 Issue #1094。

另一个有用的 link 是 HTML Webpack Plugin options 的列表。

如何配置 Vue-CLI 3 以生成没有 JavaScript 的页面？

How can I configure Vue-CLI 3 to produce a page without JavaScript?

javascript

webpack

vue.js

vue-cli-3