vue+ts实现多个vue组件同时导入(优雅写法)

66 阅读1分钟

话不多说,上代码:

const path = require('path')  
const files = require.context('@/components', false, /\.vue$/)  
const modules = {} as any;  
files.keys().forEach(key => {  
  const name = path.basename(key, '.vue')  
  modules[name] = files(key).default || files(key)  
})  
  
@Component({  
  components: {  
    ...modules // //直接已这样的方式注册组件即可  
  },  
})

若报错Module not found: Error: Can't resolve 'path' in 'xxxx',
或path.basename xxx啥问题的话,解决方案如下

npm i path-browserify 后

vue.config.js中添加配置

 configureWebpack: {
    resolve: {
      fallback: {
        path: require.resolve('path-browserify'),
      },
    },
  },