如何在Vue 3中编译不含<head>标签的HTML静态页面

步骤1：移除多余的HtmlWebpackPlugin配置 #

首先删除vue.config.js中configureWebpack里新增的HtmlWebpackPlugin实例——Vue CLI已经为每个页面自动创建了对应的插件实例，重复添加会导致冲突。

步骤2：修改页面的HtmlWebpackPlugin配置 #

通过chainWebpack调整home页面的HtmlWebpackPlugin选项，禁用自动生成外层标签，并手动处理资源引入：

module.exports = {
  pages: {
    home: {
      entry: 'src/pages/homepage/init-page.js',
      template: 'public/base.html',
      filename: 'html/home.html',
      // 移除title配置，避免自动生成<title>标签
      chunks: ['chunk-vendors', 'chunk-common', 'home']
    }
  },
  css: {
    loaderOptions: {
      less: {
        additionalData: `@import "@/styles/_variables.less";`
      }
    },
    extract: true
  },
  chainWebpack: config => {
    // 移除预加载/预取插件
    config.plugins.delete('preload-home')
    config.plugins.delete('prefetch-home')
    config.plugins.delete('preload-classifica')
    config.plugins.delete('prefetch-classifica')

    // 修改home页面的HtmlWebpackPlugin配置
    config.plugin('html-home').tap(args => {
      // 禁用自动注入，改为手动在模板中引入资源
      args[0].inject = false;
      // 保留自定义模板路径
      args[0].template = 'public/base.html';
      return args;
    });
  }
}

步骤3：更新模板文件 #

修改public/base.html，手动添加CSS和JS资源的占位符，同时不包含任何<head>、<html>、<body>标签：

<div id="app"></div>
<!-- 自动注入CSS资源 -->
<%= htmlWebpackPlugin.files.css.map(css => `<link rel="stylesheet" href="${css}">`).join('') %>
<!-- 自动注入JS资源 -->
<%= htmlWebpackPlugin.files.js.map(js => `<script src="${js}"></script>`).join('') %>

步骤4：（可选）无模板修改的快捷方案 #

如果不想手动编写资源占位符，也可以通过postProcess函数在生成HTML后移除不需要的标签：
修改chainWebpack中的对应配置：

config.plugin('html-home').tap(args => {
  args[0].inject = 'body';
  args[0].postProcess = (html) => {
    // 移除<html>、<head>及<body>相关外层标签
    return html.replace(/^<html>[\s\S]*<body>|<\/body>[\s\S]*<\/html>$/gi, '')
               .replace(/<head>[\s\S]*?<\/head>/i, '');
  };
  return args;
});

这种方式下，模板文件可以保持原有的<div id="app"></div>不变，插件会自动注入资源后再清理多余标签。

内容的提问来源于stack exchange，提问作者ClodClod91