Vue.js 如何在Vue组件中使用非Vue自定义Web组件（无Webpack）？_Vue.js

Vue.js 如何在Vue组件中使用非Vue自定义Web组件（无Webpack）？

vue.js

Vue.js 如何在Vue组件中使用非Vue自定义Web组件（无Webpack）？,vue.js,Vue.js,我有以下代码 <html> <head></head> <body> <div id="app"> {{ message }} <jrg-element></jrg-element> </div> <script type="module">

我有以下代码

<html>
    <head></head>
    <body>
        <div id="app">
            {{ message }}
            <jrg-element></jrg-element>
        </div>
        <script type="module">
            import Vue from "//unpkg.com/vue/dist/vue.esm.browser.js";
            import {ShadowElement, CREATE_ELEMENT} from "//unpkg.com/@jrg/ui/target/jrg-ui.esm.mjs";
            class JrgElement extends ShadowElement {
                constructor() {
                    super("<h1>CustomElement</h1>");
                    this.render();
                }
            }
            CREATE_ELEMENT("jrg-element", JrgElement, {});
            const app = new Vue({
                el: '#app',
                data: {
                    message: 'Hello Vue!'
                }
            })
        </script>
    </body>
</html>

但我仍然得到

结果是Vue元素渲染，但自定义元素不渲染

更新2

我试着一直等到dom加载到

document.addEventListener("DOMContentLoaded", function() {
  new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue!'
    }
  });
});

但同样的结果是，Vue模板编译器编译了Vue模板（在您的情况下，

app

div

的内容），并希望所有自定义元素都是Vue组件并正确注册。为了告诉Vue您正在使用一些非Vue自定义元素（Web组件API），您需要配置编译器

VUE2.x

Vue.config.ignoredElements=['jrg-element']

const-app=Vue.createApp（{}）
app.config.isCustomElement=tag=>tag==='jrg元素'

Vue模板（在您的情况下，

app

div

的内容）由Vue模板编译器编译，并要求所有自定义元素都是Vue组件并正确注册。为了告诉Vue您正在使用一些非Vue自定义元素（Web组件API），您需要配置编译器

VUE2.x

Vue.config.ignoredElements=['jrg-element']

const-app=Vue.createApp（{}）
app.config.isCustomElement=tag=>tag==='jrg元素'

对于Vite 2，它是这样的：

  plugins: [
    vue({
      template: {
        compilerOptions: {
          isCustomElement: tag => tag === 'jrg-element'
        }
      }
    })
  ],

来源：

对于Vite 2，它是这样的：

  plugins: [
    vue({
      template: {
        compilerOptions: {
          isCustomElement: tag => tag === 'jrg-element'
        }
      }
    })
  ],

来源：

Vue版本正在使用？最新版本可从代码下载您似乎正在使用Vue 2.x（

app=new Vue（

）…实际上，它似乎是vue 2作为unpkgFYI中的deafult版本这是一个url//unpkg.com/vue/dist/vue.esm.browser.js，因此您可以使用它来查看正在使用的vue版本？最新版本可从代码中下载您似乎正在使用vue 2.x（

app=new vue（

）…实际上，它似乎是vue 2作为unpkgFYI中的deafult版本这是一个url//unpkg.com/vue/dist/vue.esm.browser.js，因此当我添加'vue.config.ignoredElements=['jrg-element'时，您可以使用它来查看版本so'I get'Uncaught DomeException:操作不受支持。Vue元素似乎呈现正常，但Web组件没有。我将更新示例，谢谢！因此，当我添加'Vue.config.ignoredElements=['jrg-element']'I get'Uncaught DomeException:不支持操作。Vue元素似乎呈现正常，但Web组件没有。我将更新示例，谢谢！