require.context() 是webpack提供的一個自動導(dǎo)入的API
參數(shù)1：加載的文件目錄
參數(shù)2：是否加載子目錄
參數(shù)3：正則，匹配文件
返回值：導(dǎo)入函數(shù) fn
使用require提供的函數(shù)context加載某一個目錄下所有的.vue后綴的文件,他的返回值是一個對象，對象里面有一個屬keys(), 可以獲取所有的文件路徑，我們可以遍歷importFn.keys()，最后在遍歷中使用

//index.js
const requireComponent = require.context('./', false, /\w+\.vue$/)
let comps = {}
requireComponent.keys().map(fileName => {
  let comp = requireComponent(fileName).default;
  comps[comp.name] = comp
})
export default comps;

const components = import.meta.glob("./*.vue");
//注意 :  import.meta.glob 不支持變量,

// utils/dynamicComponents.js
import { defineAsyncComponent } from 'vue';
function loadComponentsFromFolder(folderPath) {
  const components = {};
  let modules = import.meta.glob('@/components/form-designer/widget/*.vue', { eager: false });
  if (folderPath == 'widgetArrt') {
    modules = import.meta.glob('@/components/form-designer/widget/widget-attr/*.vue', { eager: false });
  }
  for (const path in modules) {
    const componentName = path.match(/\/([^/]+)\.vue$/)[1];
    components[componentName] = defineAsyncComponent(modules[path]);
  }
  return components;
}
export default loadComponentsFromFolder;

// utils/dynamicComponents.js
function loadComponentsFromFolder(folderPath) {
   //省略...
    modules = import.meta.glob(`${folderPath}/*.vue`, { eager: false   });
   //省略...
}
export default loadComponentsFromFolder;

[plugin:vite:import-glob] Invalid glob import syntax:
 Expected glob to be a string, but got dynamic template literal
 //大致意思:　只能使用文本，而我們的 path 使用了變量，所以會報錯.

 // let components =ref({})  //不要寫成響應(yīng)式的了,會有性能風(fēng)險提示
 let components = {} 
 components = loadComponentsFromFolder('widget')

使用 fs 模塊讀取文件列表：
在 Node.js 環(huán)境中使用 fs 模塊讀取指定文件夾下的文件列表。
將文件列表傳遞給前端，前端再使用 import() 動態(tài)導(dǎo)入這些文件。
前端動態(tài)導(dǎo)入：

前端根據(jù)接收到的文件列表動態(tài)導(dǎo)入組件。
實現(xiàn)步驟
1. 后端讀取文件列表
首先，在 Vite 項目的 vite.config.js 或者單獨的 Node.js 腳本中，使用 fs 模塊讀取文件列表，并將結(jié)果暴露給前端。

javascript
// vite.config.js 或者單獨的 Node.js 腳本
const fs = require('fs');
const path = require('path');

function getComponentPaths(folderPath) {
  const baseFolderPath = path.resolve(__dirname, 'src/components/form-designer/widget/');
  const fullFolderPath = folderPath ? path.join(baseFolderPath, folderPath) : baseFolderPath;

  const files = fs.readdirSync(fullFolderPath);
  const componentPaths = files
    .filter(file => file.endsWith('.vue'))
    .map(file => path.join(fullFolderPath, file));

  return componentPaths.map(p => p.replace(/\\/g, '/').replace(path.resolve(__dirname, 'src/'), '@/'));
}

module.exports = {
  getComponentPaths,
};
2. 前端動態(tài)導(dǎo)入
在前端，使用 import() 動態(tài)導(dǎo)入這些文件。

javascript
// utils/dynamicComponents.js
import { defineAsyncComponent } from 'vue';

const componentCache = {};

async function loadComponentsFromFolder(folderPath) {
  // 檢查緩存
  if (componentCache[folderPath]) {
    return componentCache[folderPath];
  }

  // 獲取文件路徑列表
  const componentPaths = await fetchComponentPaths(folderPath);

  const components = {};

  // 動態(tài)導(dǎo)入模塊
  await Promise.all(componentPaths.map(async (path) => {
    const componentName = path.match(/\/([^/]+)\.vue$/)[1];
    components[componentName] = defineAsyncComponent(() => import(path));
  }));

  // 緩存結(jié)果
  componentCache[folderPath] = components;

  return components;
}

async function fetchComponentPaths(folderPath) {
  // 這里假設(shè)你有一個 API 端點來獲取文件路徑列表
  const response = await fetch(`/api/get-component-paths?folderPath=${folderPath}`);
  const data = await response.json();
  return data.paths;
}

export default loadComponentsFromFolder;
3. 創(chuàng)建 API 端點
在 Vite 項目中創(chuàng)建一個簡單的 API 端點來返回文件路徑列表。

javascript
// server/index.js
const express = require('express');
const { getComponentPaths } = require('../vite.config');

const app = express();
const port = 3000;

app.get('/api/get-component-paths', (req, res) => {
  const folderPath = req.query.folderPath;
  const paths = getComponentPaths(folderPath);
  res.json({ paths });
});

app.listen(port, () => {
  console.log(`Server running at http://localhost:${port}`);
});
使用示例
在組件或頁面中使用 loadComponentsFromFolder 函數(shù)時，只需傳遞不同的 folderPath 參數(shù)即可動態(tài)注冊不同路徑下的組件。

javascript
// 在某個 Vue 組件中使用
<script setup>
import { ref, onMounted } from 'vue';
import loadComponentsFromFolder from '@/utils/dynamicComponents';

const folderPath = 'widgetAttr'; // 可以根據(jù)實際需求動態(tài)設(shè)置
const dynamicComponents = ref({});

onMounted(async () => {
  dynamicComponents.value = await loadComponentsFromFolder(folderPath);
});
</script>

<template>
  <div>
    <component v-for="(component, name) in dynamicComponents" :is="component" :key="name"></component>
  </div>
</template>
注意事項
文件路徑處理：

確保文件路徑在前后端一致，特別是在 Windows 系統(tǒng)中，路徑分隔符需要轉(zhuǎn)換。
API 端點：

確保 API 端點能夠正確返回文件路徑列表。
性能優(yōu)化：

如果組件數(shù)量較多，可以考慮使用懶加載和緩存機(jī)制來優(yōu)化性能。
通過這種方式，你可以根據(jù)路徑參數(shù)動態(tài)注冊不同文件夾下的組件，而不需要使用 if-else 判斷。