Vue CLI - 将构建输出组合到单个 html 文件答案

【问题标题】：Vue CLI - combine build output to a single html fileVue CLI - 将构建输出组合到单个 html 文件
【发布时间】：2020-02-05 00:16:53
【问题描述】：

我有一个使用 vue-cli 创建的 vue 项目。运行yarn build 时的正常输出是一个带有index.html 的dist 文件夹和一个带有相应.js 和.css 文件的js 和css 子目录。

我希望构建输出是包含 js 和 css 的单个 html 文件。

我在项目的根目录中添加了一个vue.config.js 文件，并将其设置为输出单个 js 文件，这样就可以了。但我只想有一个带有 js 的 html 文件和 html 文件中已有的任何 css。

module.exports = {
    css: {
        extract: false,
    },
    configureWebpack: {
      optimization: {
        splitChunks: false
      }
    }
  }

基本上我希望我的 html 文件是这样的：

<html lang=en>
    <head>
        ... meta tags
        <title>my title</title>
    </head>
    <body>
        <div id=app></div>
        <script>
           // contents of the output js file here
        </script>
    </body>
</html>

这可能吗？

使用 Vue 3.9.3

【问题讨论】：

您能描述一下您的用例/场景吗？我只是好奇，你为什么要这样做
长话短说，文档需要 100% 独立和离线，以便下载并存储为旧 (v1) 科尔多瓦应用程序中的 Web 视图

标签： javascript html vue.js webpack

【解决方案1】：

有人回答建议调查html-webpack-inline-source-plugin，但删除了他们的答案。但这正是我完成这项工作所需要的。

该插件不是 Vue 或 Vue-CLI 特定的，但如果您执行以下操作，它就可以工作：

1) 在应用的根目录中添加vue.config.js 文件。

2) 上面的链接插件实际上是另一个包的扩展。两者都需要。

npm install --save-dev html-webpack-plugin 
npm install --save-dev html-webpack-inline-source-plugin

// vue.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin')
const HtmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin');
module.exports = {
    css: {
        extract: false,
    },
    configureWebpack: {
      optimization: {
        splitChunks: false // makes there only be 1 js file - leftover from earlier attempts but doesn't hurt
      },
      plugins: [
        new HtmlWebpackPlugin({
          filename: 'output.html', // the output file name that will be created
          template: 'src/output-template.html', // this is important - a template file to use for insertion
          inlineSource: '.(js|css)$' // embed all javascript and css inline
        }),
        new HtmlWebpackInlineSourcePlugin()
      ]
    }
  }

4) 添加模板。这对于在 Vue 上下文中工作是必要的，因为没有它，默认情况下输出的 html 文件将没有必要的 <div id="app"></div> 并且 Vue 不会挂载到任何东西。我基本上把正常输出的html文件拿来稍微修改了一下。

<!-- output-template.html -->
<!DOCTYPE html>
<html lang=en>
    <head>
        <meta charset=utf-8>
        <meta http-equiv=X-UA-Compatible content="IE=edge">
        <meta name=viewport content="width=device-width,initial-scale=1">        
        <title>example title</title>
    </head>
    <body><noscript><strong>We're sorry but my example doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript>
        <div id=app>

        </div>
        <!-- plugin will insert js here by default -->
    </body>
</html>

然后正常构建，output.html 文件将在/dist 文件夹中

【讨论】：

为此，我不得不改为 npm install --save-dev html-webpack-inline-source-plugin@beta 并将内联源插件初始化为 new HtmlWebpackInlineSourcePlugin(HtmlWebpackPlugin)
你是如何通过 vue-cli UI 安装 html-webpack-plugin 4.5.1 的？我只能选择最新的，并且构建与Cannot read property 'tap' of undefined 中断
通过npm i 安装4.5.1 我得到Cannot read property 'getHooks' of undefined html-webpack-inline-source-plugin 失败。
也许有点晚了，但我仍在为其他人记录这一点：如果您收到 Cannot read property 'getHooks' of undefined 消息，您忘记在 vue.config.js 中将插件初始化为 new HtmlWebpackInlineSourcePlugin(HtmlWebpackPlugin)插件数组。添加解决了问题。
当你得到'tap' of undefined时，你可能正在使用带有HtmlWebpackPlugin 5的Webpack 4。将后者降级为4就可以了。