Vue3：是否可以將包含組件的 HTML 文件導入 SFC

Question

我有一個表單組件 (SFC)，它應該導入一個 HTML 文件，其中包含 Vue 組件。

表單組件

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

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

HTML 文件 (form-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 warn]: Failed to resolve component: Button 如果這是本機自定義元素，請確保通過 compilerOptions.isCustomElement 將其從組件解析中排除。

Answer 1

是的，有可能。

您甚至可以導入腳本和樣式部分：

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

在文檔中閱讀它。

---

我不知道為什么您的代碼不起作用，我嘗試創建一個類似的演示並且它運行良好。 在 Stackblitz 上查看

Answer 2

我現在已經自己解決了這個問題。

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

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