Vue CLI - 将构建输出合并为单个HTML文件

Question

Vue CLI - 将构建输出合并为单个HTML文件

16

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

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

我在项目根目录中添加了一个vue.config.js文件，并将其设置为只输出单个js文件，这样可以正常工作。但我希望只有一个单独的html文件，其中包含js和任何已经存在于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

- Ju66ernaut

你能描述一下你的使用情况/场景吗？我只是好奇，为什么你要这样做。 - ssc-hrep3

3

长话短说，该文档需要完全独立且离线就绪，以便在旧版（v1）Cordova应用程序中下载和存储为Web视图。 - Ju66ernaut

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ju66ernaut · Accepted Answer

有人给出了一个建议，建议查看 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

3)

// 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文件夹中。