VueLoader作为HtmlWebpackPlugin内联loader不返回HTML如何解决

1. 路径错误：unable to locate 'D:\IdeaProjects\AIPlatform\oml\api\client\public' glob 报错是因为你配置的CopyWebpackPlugin读取的paths.public路径不存在，可先创建对应目录，或者临时注释该插件配置即可解决。
2. 核心逻辑错误：The loader "xxx/App.vue" didn't return html 是因为vue-loader的输出本质是JS格式的Vue组件渲染函数，不是纯HTML字符串，完全不符合HtmlWebpackPlugin对模板loader的输出要求，所以直接用vue-loader当HtmlWebpackPlugin的内联loader不可能得到HTML。

方案一：常规SPA配置（最推荐，99%场景适用） #

绝大多数Vue+webpack项目都采用该方案，实现成本最低、生态兼容最好：

1. 新建模板文件public/index.html，内容示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
  <!-- Vue组件挂载节点 -->
  <div id="app"></div>
</body>
</html>

2. 修改webpack.common.js中HtmlWebpackPlugin的配置，删掉内联vue-loader的逻辑：

new HtmlWebpackPlugin({
  title: 'webpack Boilerplate',
  favicon: paths.src + '/images/favicon.png',
  template: paths.public + '/index.html', // 指向你新建的HTML模板
  filename: 'index.html',
}),

3. 确认你的入口文件main.js中存在Vue实例挂载逻辑：

import Vue from 'vue'
import App from './App.vue'
// 可自行加路由、Vuex等其他插件初始化逻辑
new Vue({
  render: h => h(App)
}).$mount('#app')

4. 额外优化：把配置中样式规则里的style-loader改回vue-style-loader，可支持Vue单文件组件的样式热更新能力。

方案二：预渲染静态HTML（适合纯静态页面场景） #

如果你确实需要直接把App.vue的模板内容编译成静态HTML输出、不需要客户端挂载，可使用预渲染loader实现：

1. 安装依赖prerender-loader
2. 修改HtmlWebpackPlugin的template配置：

template: '!!prerender-loader?string!vue-loader!' + paths.src + '/App.vue',

该方案会在编译阶段把Vue组件渲染成静态HTML字符串输出到最终的index.html中，适合不需要客户端交互的纯静态页面场景，带路由的SPA项目不推荐使用。

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