带有 vue 3 的 Web 组件 - 未添加样式

Question

我想将我在 vue 项目中使用的一些组件导出为 web 组件，以便能够在其他非 vue 项目中使用它们。我看到 vue 支持这一点，并且它导出 web 组件，但我遇到的问题是 css - 使用导出的 web 组件时不包含（或不可用）。

为了使此案例易于重现，我使用创建新的 vue js 3 项目时生成的默认代码。我想要导出为 Web 组件的组件是我们在新项目中获得的默认 App.vue。

重现步骤：

创建一个标准的 vue（我有 3.2）项目，使用 typescript 和更少。
像这样修改main.ts：

    import { createApp, defineCustomElement } from 'vue'
    import App from './App.vue'

    createApp(App).mount('#app'). // this can be commented out

    const customApp = defineCustomElement(App);
    window.customElements.define('app-component', customApp);

在package.json中添加新脚本：

    "build:wc": "vue-cli-service build --target lib --name AppComponent src/main.ts"

修改 vue.config 以将样式包含在导出的包中：

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  css: {
    extract: false,
  }
})

在 HelloWord.vue 上，我将一个自定义类添加到第一个 div （以便更容易在生成的 js 库代码中找到它）和 css （在我的情况下较少）块内：

.hello { border: 1px solid green; background-color: #dedede; }

运行构建：npm run build：wc

这将创建一个新文件夹 - dist - 并在其中放置导出的 Web 组件 - AppComponent.udm.js 是我们需要导入的文件，以便访问新导出的组件。

在 public 文件夹中，我创建了一个简单的 html 文件 test.html，其中包含以下内容：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Web-Component</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="../dist/AppComponent.umd.js"></script>
</head>
<body>
    <app-component></app-component>
</body>
</html>

当我在 chrome 中打开此文件时，我可以在 test.html 中看到 web 组件，我可以看到该组件，但它没有应用 css。

我打开生成的 AppComponent.umd.js 文件，我看到 css 已添加到其中（您可以看到 .hello 类及其定义：border:1px Solid green;background-color:#dedede）：

var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));
// Module
___CSS_LOADER_EXPORT___.push([module.id, "h3[data-v-1ac357d5]{margin:40px 0 0}ul[data-v-1ac357d5]{list-style-type:none;padding:0}li[data-v-1ac357d5]{display:inline-block;margin:0 10px}a[data-v-1ac357d5]{color:#42b983}.hello[data-v-1ac357d5]{border:1px solid green;background-color:#dedede}", ""]);

但是...... test.html 文件无法正确渲染（如下面的屏幕截图所示）。

问题：

正确的做法是怎样的？如何从 vue 3 导出一个 web 组件（带有子组件 - 就像我在本例中使用 HelloWordComponent 的 App.vue 一样），以便浏览器正确渲染它（使用 css）。

有人遇到过这个问题吗？一些想法？一些文档/教程？

我尝试将 VUE 组件导出为 Web 组件。我希望得到一个完整的功能组件 - 但我得到它没有风格。

Answer 1

如果您将 SFC 从

my-component.vue

重命名为

my-component.ce.vue

，则样式将由

defineCustomElement

正确处理，请参阅 https://vuejs.org/guide/extras/web-components 了解详细信息（Example.vue 是重命名为Example.ce.vue）

带有 vue 3 的 Web 组件 - 未添加样式

问题描述投票：0回答：1

1个回答

最新问题

带有 vue 3 的 Web 组件 - 未添加样式

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1