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

Posted 2023-02-22

【中文标题】如何配置 Vue-CLI 3 以生成没有 JavaScript 的页面？

【英文标题】：How can I configure Vue-CLI 3 to produce a page without JavaScript?

【发布时间】：2021-03-23 12:03:51

【问题描述】：

我有一个不需要 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 文件呢？

【参考方案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。

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