Vue2老项目引入预编译Web Component报错_Ctor object is not extensible

你使用vue build --target wc编译出的产物是标准Web Component原生自定义元素，并非供Vue框架注册使用的SFC组件模块，报错由两个错误操作触发：

• 你将Web Component产物当成普通Vue组件，执行了全局/局部注册操作，二者适配规则完全不兼容
• Vue 2默认会扫描解析挂载节点#container内的所有自定义标签，将未匹配到注册规则的标签判定为非法Vue组件，抛出_Ctor相关构造函数错误

你之前两种正常运行的场景本质都是避开了Vue的模板解析逻辑：动态插入标签时Vue已完成初始化模板解析，不会校验新增DOM；放在挂载范围外的标签不受Vue解析逻辑管控，因此都不会触发错误。

按以下步骤调整即可在Vue挂载容器内正常使用该组件：

1. 删除所有Web Component相关的Vue组件注册代码，移除Vue.component('hello-world',HelloWorld)全局注册、以及实例内components:{HelloWorld}局部注册的逻辑，引入时也不需要赋值给变量，直接写import '../dist/hello-world.js'即可，Web Component产物为自执行逻辑，引入后会自动完成全局自定义元素注册
2. 在初始化Vue实例前，添加配置让Vue忽略对hello-world自定义标签的解析：

// 单标签匹配
Vue.config.ignoredElements = ['hello-world']
// 如果你有多个符合命名规范的Web Component，也可以用正则批量匹配
// Vue.config.ignoredElements = [/^[a-z]+-[a-z]+/]

3. 直接在#container内写<hello-world></hello-world>标签就能正常运行。

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