Блог

Главная - Вопросы по программированию - Веб-компонент VUE внутри устаревшего приложения выдает ошибку «_Ctor, объект не является расширяемым»

Веб-компонент VUE внутри устаревшего приложения выдает ошибку «_Ctor, объект не является расширяемым»

#vue.js #vuejs2 #vue-component #web-component #vue-cli

#vue.js #vuejs2 #vue-компонент #веб-компонент #vue-cli

Вопрос:

У меня возникли проблемы с импортом моего пользовательского компонента в мое устаревшее приложение. Я предварительно скомпилировал свой SFC как веб-компонент с помощью vue-cli builder, и я импортирую в свой 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…
Журнал ошибок JS при инициализации приложения

Я заметил, что при загрузке страницы без следующего тега компонента :

 <hello-world></hello-world>

ошибка не выдается, и если я добавлю тег компонента через JS после загрузки страницы, компонент работает правильно.
Если я добавлю этот компонент за пределы моей области Vue.el (#container), он тоже работает.
Тем не менее, я хотел бы добавить этот компонент в #container .

Я импортирую Vue 2 через CDN. Похоже на ошибку загрузки или сборки, но я не могу ее получить.

Спасибо за вашу помощь.

hello-world.js является предварительно скомпилированным .Файл VUE с vue-cli, просто тестовый файл, фиксирующий некоторые события :

 <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

Комментарии:

1. Проблема специфична для hello-world.js . Вы его не показали

2. Я отредактировал свой пост, hello-world.js является предварительно скомпилированным . Файл VUE, содержимое этого. VUE в исходном сообщении. Спасибо.

3. Это экспорт по умолчанию, поэтому он должен быть импортом по умолчанию, а не * . Вероятно, проблема здесь.

4. Я попытался: импортировать HelloWorld из ‘../dist/hello-world.js «. Результат: запрошенный модуль ‘..’ не предоставляет экспорт с именем ‘default’

5. Он не просто предварительно скомпилирован, он скомпилирован как веб-компонент. См. cli.vuejs.org/guide/build-targets.html#web-component . Вам вообще не нужно импортировать компонент HelloWorld. Это не компонент. Это веб -компонент

Ответ №1:

Он заработал, создав его с --target помощью библиотеки lib и импортировав мой JS-файл с помощью:

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

Затем его можно добавить в мой экземпляр Vue с помощью:

 components:{
    "hello-world":HelloWorld
}

Кажется, это правильный способ сделать это; веб-компоненты не могут быть импортированы таким образом.

Метки: ,