Блог

Я создал новый проект vue с помощью командной строки vue, а затем скорректировал main.js для поддержки веб-компонентов:

 import Vue from 'vue';
import wrap from '@vue/web-component-wrapper';
import HelloWorld from "./components/HelloWorld";

const CustomElement = wrap(Vue, HelloWorld);

window.customElements.define('my-custom-element', CustomElement);
  

При запуске vue-cli-service build --target wc я получаю следующую ошибку:

 ERROR  Vue 3 support of the web component target is still under development.
  

Я не могу понять, почему возникает эта ошибка и что я могу сделать, чтобы ее исправить.

package.json:

 ...
"dependencies": {
   "@vue/web-component-wrapper": "^1.2.0",
   "core-js": "^3.6.5",
   "vue": "^3.0.2"
 },
 "devDependencies": {
   "@vue/cli-plugin-babel": "~4.5.0",
   "@vue/cli-plugin-eslint": "~4.5.0",
   "@vue/cli-service": "^4.5.4",
   "@vue/compiler-sfc": "^3.0.0",
   "babel-eslint": "^10.1.0",
   "eslint": "^6.7.2",
   "eslint-plugin-vue": "^7.0.0-0"
 },
...
  

Я использую @vue / cli версии 4.5.9.

Привет, в этом есть обновление. Тема см. Вопрос на github и комментарий в twitter похоже, что с vue 3.2.0 мы вернули эту функцию. я создал небольшой stackblitz, но, как вы можете видеть, стили не применяются

Vue-CLI в настоящее время не поддерживает веб-компоненты для Vue 3, но вы можете сделать это вручную. Это сработало для меня.

src/MyLib.js

 export { default as TheFoo } from '@/components/TheFoo.vue';
export { default as TheBar } from '@/components/TheBar.vue';
  

src/MyLib-WC.js

 import { defineCustomElement } from 'vue';

import TheFoo from '@/components/TheFoo.vue';
import TheBar from '@/components/TheBar.vue';

const TheFooWC = defineCustomElement(TheFoo);
const TheBarWC = defineCustomElement(TheBar);

export {
  TheFooWC,
  TheBarWC
};

export function register () {
  customElements.define('the-foo', TheFooWC);
  customElements.define('the-bar', TheBarWC);
}
  

package.json

 {
  "scripts": {
    "build": "npm run build-lib amp;amp; npm run build-wc",
    "build-lib": "vue-cli-service build --name=MyLib --modern --dest=dist/lib --target=lib src/MyLib.js",
    "build-wc": "vue-cli-service build --name=MyLib --modern --dest=dist/wc --target=lib --inline-vue src/MyLib-WC.js"
  }
}
  

Затем npm run build .

Как указал @tony19, решение состоит в том, чтобы не использовать Vue3, поскольку он не поддерживает веб-компоненты.

Проблемой для меня было вводящее в заблуждение сообщение об ошибке, поскольку «все еще находится в разработке» не сигнализировало мне о том, что веб-компоненты полностью не поддерживаются. Я понял это как «не все будет работать идеально».