Vue3 Vite中根容器加载Vuetify/Element Plus组件失败问题

我尝试将Vuetify或Element Plus组件直接加载到#app根容器中，仅全量导入组件时可正常运行，但会导致文件体积过大；使用手动或自动导入方式时，会出现如下错误：

Failed to resolve component:

怀疑是Vite配置存在问题，但无法定位原因。

正常运行场景（组件写在.vue文件中挂载） #

将组件封装在demo.vue中并挂载时可正常运行，代码如下：

// Main.js 
import { createApp } from 'vue/dist/vue.esm-bundler';
app.component('demo', Demo);
app.mount('#app');

// demo.vue
<el-collapse v-model="activeName" accordion>
  <el-collapse-item :title="test" name="1">
    <div>AAA</div>
    <div>AAA</div>
  </el-collapse-item>
</el-collapse>

报错场景（直接将组件内容放入根容器） #

仅全量导入时可正常运行，相关代码如下：

import { createApp } from 'vue/dist/vue.esm-bundler';
const app = createApp({
  mounted() {
    console.log('The app is working')
  }
});

const app2 = createApp(App) 
app2.mount('#container')

我的Vite配置 #

import { defineConfig } from 'vite'
import { fileURLToPath, URL } from 'node:url'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import path from 'path'

export default defineConfig({
  // base: '/dist/',
 
  plugins: [
    vue(), 
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ], 
  resolve: {
    alias: {
      'vue': 'vue/dist/vue.esm-bundler',
    },
  }, 
  build: {
    outDir: '../wwwroot/distback',
    rollupOptions: {
      input: {
        front: fileURLToPath(new URL('./qasar/index.html', import.meta.url)),
      },
      output: {
        entryFileNames: `assets/[name].js`,
        chunkFileNames: `assets/[name].js`,
        assetFileNames: `assets/[name].[ext]`
      }
    }
  },
  define: { 'process.env': {} },
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    },
    extensions: [
      '.js', '.json', '.jsx', '.mjs', '.ts', '.tsx', '.vue',
    ],
  },
  server: {
    port: 5000,
  },
})

问题原因及修复方案 #

1. 重复的resolve配置导致别名失效 #

你的Vite配置中定义了两次resolve对象，后面的配置会覆盖前面的，导致vue别名丢失，影响Vue的正确加载。

修复：合并resolve配置
将两个resolve合并为一个，确保所有别名和扩展名配置生效：

resolve: {
  alias: {
    'vue': 'vue/dist/vue.esm-bundler',
    '@': fileURLToPath(new URL('./src', import.meta.url))
  },
  extensions: [
    '.js', '.json', '.jsx', '.mjs', '.ts', '.tsx', '.vue',
  ],
},

2. 根容器HTML中的组件无法被按需导入插件解析 #

unplugin-vue-components插件仅会解析.vue文件中的组件并自动注册，如果你直接在HTML的根容器（如#container对应的模板）中写Element Plus组件，插件无法识别这些组件，导致未注册报错。

修复方案二选一：

• 方案一：手动注册根实例所需组件
  在创建根实例时，手动导入并注册需要的组件：

  import { createApp } from 'vue/dist/vue.esm-bundler';
  import { ElCollapse, ElCollapseItem } from 'element-plus';
  import 'element-plus/dist/index.css';
  
  const app = createApp({
    mounted() {
      console.log('The app is working')
    },
    components: {
      ElCollapse,
      ElCollapseItem
    }
  });
  app.mount('#container');
  

• 方案二：将根内容封装到.vue文件中
  把原本写在根容器的内容放到App.vue里，再挂载这个组件，这样插件就能正常解析并自动注册组件：

  // App.vue
  <template>
    <el-collapse v-model="activeName" accordion>
      <el-collapse-item :title="test" name="1">
        <div>AAA</div>
        <div>AAA</div>
      </el-collapse-item>
    </el-collapse>
  </template>
  
  <script setup>
  import { ref } from 'vue';
  const activeName = ref('1');
  const test = '测试标题';
  </script>
  

  // Main.js
  import { createApp } from 'vue/dist/vue.esm-bundler';
  import App from './App.vue';
  
  const app = createApp(App);
  app.mount('#container');
  

3. 避免创建多个Vue实例 #

你的代码中创建了app和app2两个独立的Vue实例，这会导致资源浪费且可能引发配置冲突，建议只保留一个根实例。

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