使用Vue CLI+Webpack生成HTML时出现模板中不存在的head标签问题

嘿，我之前刚好碰到过一模一样的问题！Vue CLI默认会产出带完整<html>/<head>/<body>标签的页面，但咱们要的是能无缝嵌入Nunjucks的组件片段，所以得调整构建配置，把多余的顶层标签去掉。下面分两种Vue CLI版本给你具体解决方案：

如果你用的是Vue CLI 2.x #

1. 修改Webpack构建配置，禁用完整HTML生成
   打开项目里的build/webpack.prod.conf.js，找到plugins数组里的HtmlWebpackPlugin配置项，做如下调整：

   new HtmlWebpackPlugin({
     filename: process.env.NODE_ENV === 'testing'
       ? 'index.html'
       : config.build.index,
     // 替换默认模板，改用咱们自己的片段模板
     template: './src/embed-template.html',
     inject: false, // 禁止插件自动注入资源，咱们手动控制
     minify: {
       removeComments: true,
       collapseWhitespace: true,
       removeAttributeQuotes: true
       // 其他压缩配置保留不动
     },
     chunksSortMode: 'dependency'
   })
   

2. 创建自定义嵌入模板src/embed-template.html
   这个模板只需要包含组件的挂载容器和资源引入占位符，完全不需要顶层标签：

   <div id="paintpicker-app"></div>
   <!-- 手动引入打包后的CSS和JS -->
   <link rel="stylesheet" href="<%= htmlWebpackPlugin.files.css[0] %>">
   <script src="<%= htmlWebpackPlugin.files.js[0] %>"></script>
   

3. 确认入口文件的挂载逻辑
   检查你的src/main.js，确保组件是挂载到上面定义的容器上：

   new Vue({
     el: '#paintpicker-app',
     render: h => h(App)
   })
   

4. 构建并复制片段到Nunjucks目录
   执行npm run build后，dist目录下的index.html就是干净的组件片段了，没有多余的<head>标签，直接复制到你的vueapps/paintpicker.html里，就能用{% include 'vueapps/paintpicker.html' %}正常引入了。

如果你用的是Vue CLI 3+/4/5（基于vue.config.js） #

1. 配置pages选项生成片段式输出
   在项目根目录的vue.config.js里添加如下配置（如果没有这个文件就新建一个）：

   module.exports = {
     pages: {
       paintpicker: {
         entry: 'src/main.js', // 你的组件入口文件路径
         template: 'public/embed-template.html', // 自定义片段模板
         filename: 'paintpicker.html', // 输出的文件名
         inject: false, // 禁止自动注入资源
         chunks: ['chunk-vendors', 'chunk-common', 'paintpicker']
       }
     }
   }
   

2. 创建public/embed-template.html模板
   内容和CLI 2的模板一致，只保留挂载容器和资源引入：

   <div id="paintpicker-app"></div>
   <link rel="stylesheet" href="<%= htmlWebpackPlugin.files.css[0] %>">
   <script src="<%= htmlWebpackPlugin.files.js[0] %>"></script>
   

3. 确认挂载逻辑后构建
   同样确保src/main.js里的组件挂载到#paintpicker-app，然后执行npm run build，dist/paintpicker.html就是可直接嵌入的片段了。

更灵活的替代方案：打包成UMD库 #

如果不想折腾HTML模板配置，也可以把Vue组件打包成通用库，然后在Nunjucks模板里直接引入：

1. 修改package.json的main字段：

   "main": "dist/paintpicker.umd.min.js"
   

2. 执行打包命令：

   npm run build --target lib --name paintpicker src/main.js
   

3. 在Nunjucks模板里直接调用：

   <div id="paintpicker-app"></div>
   <script src="/path/to/paintpicker.umd.min.js"></script>
   <script>
     // 直接实例化组件
     new Paintpicker({
       el: '#paintpicker-app'
     })
   </script>
   

这种方式完全避开了生成完整HTML的问题，更适合嵌入到现有模板系统的场景。

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