vue 3 的 Web 组件 - 未添加样式
Zel*_*Ady 7 web-component webpack vue-component vuejs3
我想将我在 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（在我的情况下为 less）块内：
.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 组件。我希望得到一个完整的功能组件 - 但我得到的却没有风格。
如果您将 SFC 重命名为 ，my-component.vue则my-component.ce.vue样式将被正确处理，请defineCustomElement参阅https://vuejs.org/guide/extras/web-components了解详细信息（Example.vue 已重命名为Example.ce.vue）
| 归档时间： |
|
| 查看次数： |
1003 次 |
| 最近记录： |