旧版应用程序中的 VUE Web 组件导致错误“_Ctor，对象不可扩展”

Posted 2023-02-16

【中文标题】旧版应用程序中的 VUE Web 组件导致错误“_Ctor，对象不可扩展”

【英文标题】：VUE Web component inside legacy app results in error "_Ctor, object is not extensible"

【发布时间】：2022-01-12 10:43:06

【问题描述】：

我在旧版应用程序中导入自定义组件时遇到问题。 我使用 vue-cli builder 将我的 SFC 预编译为 web 组件，然后以这种方式导入到我的 main.js 文件中：

import * as HelloWorld from '../dist/hello-world.js'
Vue.component('hello-world',HelloWorld); //if I add my component globally (same _Ctor error)

然后我将我的应用加载到容器 div 上：

var app = new Vue(
    el:"#container",
  data: 
    test: 'Vue is init !' //just a test to validate init
  ,
  components:
        HelloWorld //my web component locally (same _Ctor error)
    
);

当我的应用程序加载时，我收到这个 JS 错误...

我注意到当页面加载时没有以下组件标签：

<hello-world></hello-world>

没有错误抛出，如果我在页面加载后通过 JS 添加组件标签，则组件正常工作。 如果我将此组件添加到我的 Vue.el (#container) 范围之外，它也可以工作。 但是，我想将此组件添加到#container。

我通过 CDN 导入 Vue 2。 似乎是加载或构建错误，但我无法理解。

感谢您的帮助。

---

hello-world.js 是一个使用 vue-cli 预编译的 .VUE 文件，只是一个捕获一些事件的测试文件：

<template>
  <h1 v-on:click="clickon"
      v-on:mouseenter="addone"
  >msg</h1>
</template>

<script>

export default 
  name: "HelloWorld",
  data() 
    return 
      msg: 'Hello world!'
    
  ,
  methods : 
    clickon: function () 
      // `this` inside methods points to the Vue instance
      alert('Clicked')
    ,
    addone: function()
      this.msg = 'Mouse entered'
    ,

  

</script>

<style>
h1
  color:red;

</style>

预编译：

vue build --target wc HelloWorld.vue

【问题讨论】：

这个问题是 hello-world.js 特有的。你没有显示它

我编辑了我的帖子，hello-world.js 是一个预编译的.VUE 文件，这个.VUE 的内容在原帖中。谢谢。

是默认导出，所以应该是默认导入，而不是*。这可能是这里的问题。

我试过：从'../dist/hello-world.js'导入HelloWorld。结果：请求的模块“..”未提供名为“默认”的导出

它不只是预编译的，它被编译为 web 组件。见cli.vuejs.org/guide/build-targets.html#web-component。您根本不需要导入 HelloWorld 组件。它不是一个组件。它是 web 组件

【参考方案1】：

通过使用 --target lib 构建它并使用以下命令导入我的 JS 文件来让它工作：

import '../dist/HelloWorld.umd.js';

然后它可以添加到我的 Vue 实例中：

components:
    "hello-world":HelloWorld

似乎是正确的做法；无法通过这种方式导入 Web 组件。