Vue3中能否从单个文件导出多个组件？附SVG组件实践问题

你的问题核心在于：无Node环境下浏览器无法直接解析.vue单文件组件（SFC）的结构——SFC需要编译工具处理才能拆分template/script/style并转换为浏览器可识别的代码，而你直接导入.vue文件的方式在无编译环境下不生效。以下是两种直接可用的解决方案：

方案一：用普通JS文件定义并导出多图标组件 #

放弃.vue文件，改用纯JS文件定义图标组件，利用Vue3运行时编译能力（需使用带编译器的Vue版本）。

1. 创建icons.js文件 #

// icons.js
export const AccountIcon = {
  template: `
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
      <title>AccountIcon</title>
      <path d="M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z" />
    </svg>
  `
};

export const AccountIconTest2 = {
  template: `
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
      <title>AccountIconTest2</title>
      <path d="M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z" />
    </svg>
  `
};

2. 在页面中导入使用 #

确保导入脚本声明为type="module"，同时使用带编译器的Vue版本（如vue.global.js）：

<template>
  <div>
    <v-icon>
      <AccountIcon />
    </v-icon>
    <v-icon>
      <AccountIconTest2 />
    </v-icon>
  </div>
</template>

<script type="module">
import { AccountIcon, AccountIconTest2 } from "./components/icons.js";

export default {
  components: {
    AccountIcon,
    AccountIconTest2,
  },
};
</script>

3. 全局依赖引入（HTML中） #

确保页面头部引入的是带编译器的Vue和Vuetify UMD版本：

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<link href="https://cdn.jsdelivr.net/npm/vuetify@3/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vuetify@3/dist/vuetify.min.js"></script>

方案二：全局注册所有图标组件（适合图标较多的场景） #

如果需要在多个页面复用图标，可直接在全局注册组件，无需每次导入：

// icons.js
const AccountIcon = {
  template: `
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
      <title>AccountIcon</title>
      <path d="M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z" />
    </svg>
  `
};

const AccountIconTest2 = {
  template: `
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
      <title>AccountIconTest2</title>
      <path d="M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z" />
    </svg>
  `
};

// 全局注册组件
export function registerIcons(app) {
  app.component('AccountIcon', AccountIcon);
  app.component('AccountIconTest2', AccountIconTest2);
}

在Vue实例初始化时调用注册函数：

const { createApp } = Vue;
const app = createApp(App);

// 导入并注册图标
import { registerIcons } from './components/icons.js';
registerIcons(app);

app.use(Vuetify);
app.mount('#app');

之后在任意页面模板中直接使用<AccountIcon />即可，无需重复导入。

内容的提问来源于stack exchange，提问作者Hodei Aguirre