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

0md85ypi 于 2022-12-23 发布在 Vue.js

关注(0)|答案(3)|浏览(197)

我使用vue cli创建了一个新的vue项目，然后调整main.js以支持web组件：

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。

vue.js

来源：https://stackoverflow.com/questions/64890650/vue-3-web-components-do-not-build-and-instead-throw-error

3条答案

按热度按时间

vfwfrxfs1#

你好，这里面有一个更新。主题见github上的问题和评论twitter看起来像vue 3. 2. 0，我们有这个功能回来了，我创建了一个小stackblitz，但正如你所看到的样式没有应用

赞(0）回复(0）举报 2022-12-23

gzszwxb42#

Vue-CLI目前还不支持Vue 3的web组件，但是你可以用手来做，这对我很有效。
第一个月

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 && 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。

赞(0）回复(0）举报 2022-12-23

jc3wubiy3#

正如@tony19所指出的，解决方案是不使用Vue 3，因为它目前不支持Web组件。
对我来说，问题是误导性的错误信息，因为“仍在开发中”并没有向我发出Web组件完全不受支持的信号。我将其理解为“不是所有东西都能完美工作”。

赞(0）回复(0）举报 2022-12-23