1

我目前正在研究 Web 组件和影子 DOM。我可以看到可以在Vue docs中使用 Vue3 创建本机 Web 组件 。但我目前面临从 vuejs 文件构建本机组件文件的问题。我用谷歌搜索了一段时间，发现没有多少有用的内容。

使用 Vue 3.2 构建 Web 组件是迄今为止我发现的最有用的博客。我仍然无法对我的文件进行生产构建。

目前我在构建后得到 2 个文件。

import {
  r as c,
  c as l,
  o as a,
  a as u,
  b as d,
  d as f,
  t as m,
  u as p,
  e as g,
} from "./vendor.21fe8919.js";
const y = function () {
  const r = document.createElement("link").relList;
  if (r && r.supports && r.supports("modulepreload")) return;
  for (const e of document.querySelectorAll('link[rel="modulepreload"]')) o(e);
  new MutationObserver((e) => {
    for (const t of e)
      if (t.type === "childList")
        for (const s of t.addedNodes)
          s.tagName === "LINK" && s.rel === "modulepreload" && o(s);
  }).observe(document, { childList: !0, subtree: !0 });
  function i(e) {
    const t = {};
    return (
      e.integrity && (t.integrity = e.integrity),
      e.referrerpolicy && (t.referrerPolicy = e.referrerpolicy),
      e.crossorigin === "use-credentials"
        ? (t.credentials = "include")
        : e.crossorigin === "anonymous"
        ? (t.credentials = "omit")
        : (t.credentials = "same-origin"),
      t
    );
  }
  function o(e) {
    if (e.ep) return;
    e.ep = !0;
    const t = i(e);
    fetch(e.href, t);
  }
};
y();
const h = {
    props: { timeZone: { type: String, default: "America/Los_Angeles" } },
    emits: ["datechange"],
    setup(n, { emit: r }) {
      const i = n,
        o = c(new Date()),
        e = l(() => o.value.toLocaleString("en-US", { timeZone: i.timeZone }));
      return (
        setInterval(() => {
          (o.value = new Date()), r("datechange", e);
        }, 1e3),
        (t, s) => (
          a(), u("div", null, [d(t.$slots, "prefix"), f(" " + m(p(e)), 1)])
        )
      );
    },
  },
  v = g(h);
customElements.define("current-time", v);
document.querySelector("current-time").addEventListener("datechange", L);
function L(n) {
  console.log(n.detail[0].value);
}

但我希望构建文件在我的用例中采用以下格式。

class CurrentTime extends HTMLElement {
  connectedCallback() {
    this.innerHTML = new Date();

    setInterval(() => this.innerHTML = new Date(), 1000)
  }
}

// Define it as a custom element
customElements.define('current-time', CurrentTime);

vite 配置文件

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

export default defineConfig({
  plugins: [vue({ customElement: true })],
});
4

0 回答 0