Vue 3 Web 组件不构建而是抛出错误

Question

我用 vue cli 创建了一个新的 vue 项目，然后调整 main.js 以支持 web-components:

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.

Answer 1

正如@tony19 指出的那样，解决方案是不使用 Vue3，因为它目前不支持 Web 组件。

我的问题是误导性错误消息，因为“仍在开发中”并没有向我发出完全不支持 Web 组件的信号。我理解为“并非一切都能完美运行”。

Answer 2

您好，这里有更新。题目见 issue on github and comment on twitter looks like with vue 3.2.0 we have this feature back i created a small stackblitz 但如您所见，未应用样式

Vue 3 Web 组件不构建而是抛出错误

Vue 3 Web Components do not build and instead throw error

web-component

vue.js

vuejs3