如何实现从components目录下的index.js中直接导入组件？

这种导入方式完全可以实现，你只需要确认两个配置项正确即可：

1. 配置路径别名@ #

首先要确保你的项目已经将@别名指向项目根目录下的src文件夹，目前市面上主流的前端项目脚手架（如Vue CLI、Vite等）默认都会内置这个配置，如果你的项目没有默认配置，可以手动补充：

• Vite项目（vite.config.js）：

import { defineConfig } from 'vite'
import path from 'path'

export default defineConfig({
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src')
    }
  }
})

• Vue CLI项目（vue.config.js）：

const path = require('path')
module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        '@': path.resolve(__dirname, 'src')
      }
    }
  }
}

2. 确认组件导出方式符合使用场景 #

你现在components/index.js里的写法是动态导出异步组件：

export const Component1 = () => import('./forms/Component.vue')

这种写法下你导入的Component1是一个异步组件加载函数，适合用在路由懒加载、defineAsyncComponent包裹的异步组件场景。
如果你需要的是同步导入普通组件，可以把index.js的导出逻辑改成：

export { default as Component1 } from './forms/Component.vue'

两个配置都确认无误后，你就可以直接使用你想要的简洁写法导入组件：

import { Component1 } from '@/components'

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