升级webpack-encore与vue-loader后Vue插槽编译出现#document-fragment异常

问题原因 #

1. 版本不兼容是核心问题
   你当前的依赖配置存在两个冲突点：

• Vue官方强制要求vue和vue-template-compiler的版本必须完全一致，你项目中vue为2.5.17版本，但vue-template-compiler使用了^范围符，实际安装时很可能拉取到更高版本，二者编译逻辑不匹配，导致插槽被错误编译。
• 你升级后的vue-loader@15.9.5版本优化了插槽编译逻辑，主要适配Vue 2.6+的v-slot语法，对Vue 2.5.x版本的旧slot=""语法存在兼容bug，会把插槽内容错误包裹在带document-fragment的template标签中不渲染。

2. 你将/deep/替换为::v-deep的操作和该问题完全无关，这是CSS作用域语法，不会影响模板的DOM结构编译逻辑。

修复方案 #

• 方案一（推荐）：将vue和vue-template-compiler都固定升级到2.6.14（Vue 2的最终稳定版），该版本同时兼容新旧插槽语法，也适配15.x版本的vue-loader，修改版本后删除node_modules和包锁文件（package-lock.json/yarn.lock）重新安装依赖即可。
• 方案二（不升级Vue）：将vue-loader降级到15.7.2版本，该版本对Vue 2.5.x的旧插槽语法支持稳定，不会出现编译错误。
• 后续优化建议：可以逐步把旧的slot="xxx"写法替换为Vue 2.6+推荐的v-slot:xxx语法，避免后续版本升级出现兼容问题。

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