因为在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')
您好~我是腾讯云开发者社区的运营,关注了您分享的技术博客,觉得内容很棒,我们诚挚邀请您加入腾讯云自媒体分享计划。完整福利和申请地址请见:https://cloud.tencent.com/developer/support-plan 作者申请此计划后将作者的文章进行搬迁同步到社区的专栏下,你只需要简单填写一下表单申请即可,我们会给作者提供包括流量、云服务器等,另外还有些周边礼物。