Vue3：是否可以将包含组件的 HTML 文件导入 SFC

Question

我有一个表单组件 (SFC)，它应该导入一个包含 Vue 组件的 HTML 文件。

表单组件

<template src="../../../views/form-settings.html"></template>

<script setup>
import Button from "./../ui/button/Button.vue";
</script>

HTML 文件(表格-settings.html)

<div>
     <Button>test button</Button>
</div>

package.json

"devDependencies": {
    "@vue/compiler-sfc": "^3.2.31",
    "laravel-mix": "^6.0.6",
    "vue-loader": "^17.0.0"
},
"dependencies": {
    "vue": "^3.2.31",
},

HTML 文件已正确加载，但其中的 Button-Component 未正确加载。所以我得到错误： [Vue 警告]：解析组件失败：按钮如果这是原生自定义元素，请确保通过 compilerOptions.isCustomElement.

将其从组件解析中排除

Answer 1

是的，这是可能的。

您甚至可以导入脚本和样式部分：

<template src="./template.html"></template>
<style src="./style.css"></style>
<script src="./script.js"></script>

Read it in the docs.

我不知道为什么您的代码不起作用，我尝试创建一个类似的演示并且它运行良好。 See it here on Stackblitz

Answer 2

我现在已经自己解决了这个问题。

我不得不在 app.js 的 HTML 文件中导入我想使用的组件，然后用 Vue 初始化它们。

import BaseButton from "./components/ui/BaseButton.vue";
app.component("BaseButton", BaseButton);

Vue3：是否可以将包含组件的 HTML 文件导入 SFC

Vue3: is it possible to import a HTML file with components in it to a SFC

html

javascript

vue.js

vue-component

vuejs3

是的，这是可能的。