因为在Vite中不能使用webpack的require.context()方式来读取文件所以之前使用webpack注册全局组件的方式就不能使用了。
Webpack注册全局组件的方式
import Vue from 'vue' const requireComponent = require.context( // 其组件目录的相对路径 './', // 是否查询其子目录 false, // 匹配基础组件文件名的正则表达式 /[A-Z]\w+\.(vue|js)$/, ) requireComponent.keys().forEach((fileName) => { // 获取组件配置 const componentConfig = requireComponent(fileName) // 获取组件的 PascalCase 命名 const componentName = upperFirst( camelCase( // 获取和目录深度无关的文件名 fileName .split('/') .pop() .replace(/\.\w+$/, ''), ), ) // 全局注册组件 Vue.component( componentName, // 如果这个组件选项是通过 <code>export default</code> 导出的, // 那么就会优先使用 <code>.default</code>, // 否则回退到使用模块的根。 componentConfig.default || componentConfig, ) })
Vite注册全局组件的方式
1、import.meta.glob() 2、import.meta.globEager()
// 这里根据实际情况设置路径 const components = import.meta.glob('./组件目录名/*/*.vue') export default function install (app) { for (const [key, value] of Object.entries(components)) { const name = key.split('/')[1] app.component(name, defineAsyncComponent(value)) } }
在main.js文件中import并use
# main.js import { createApp } from 'vue' import App from './App.vue' import components from './components/index.js' createApp(App).use(components).mount('#app')