vue3+vueRouter在vite2里多模块配置

Vite没有像webpack的require.context，Vite支持通过特殊的import.meta.glob和import.meta.globEager（两个语法区别后面有对比）从文件系统中导入多个模块:

结构目录:

webpack实现路由多模块的方法：

// 合并路由
const modulesFiles = require.context('./modules', true, /\.js$/)
const modulesRouter = modulesFiles.keys().reduce((modules, modulePath) => {
  const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
  const value = modulesFiles(modulePath)
  modules[moduleName] = value.default
  return modules
}, {})

可看出会遍历modules下的所有router相关的js文件进行合并

Vite支持的import.meta.globEager写法

const routesModules = import.meta.globEager('./modules/*.js')
routes = [...routes, ...Object.values(routesModules).map((v) => v.default)]

可看出写法稍有不一样'./modules/*.js'是指定modules下的所有.js文件，然后通过Object.values(routesModules).map((v) => v.default)取到模块路由的相关配置

vite里的完整截图

demo.js

login.js同上

import.meta.glob和import.meta.globEager的区别

Vite官网Glob导入

global 实际上是动态导入，用的 import()

以上将会被转译为下面的样子：
Vite 支持使用特殊的 import.meta.glob 函数从文件系统导入多个模块：

const modules = import.meta.glob('./dir/*.js')
// vite 生成的代码
const modules = {
  './dir/foo.js': () => import('./dir/foo.js'),
  './dir/bar.js': () => import('./dir/bar.js')
}
你可以遍历 modules 对象的 key 值来访问相应的模块：

for (const path in modules) {
  modules[path]().then((mod) => {
    console.log(path, mod)
  })
}

globalEager 是相当于手写了一堆 import xxx from yyyy，会直接被全部导入

如果你倾向于直接引入所有的模块（例如依赖于这些模块中的副作用首先被应用），你可以使用 import.meta.globEager 代替：

const modules = import.meta.globEager('./dir/*.js')
以上会被转译为下面的样子：

// vite 生成的代码
import * as __glob__0_0 from './dir/foo.js'
import * as __glob__0_1 from './dir/bar.js'
const modules = {
  './dir/foo.js': __glob__0_0,
  './dir/bar.js': __glob__0_1
}

请注意：这只是一个 Vite 独有的功能而不是一个 Web 或 ES 标准该 Glob 模式会被当成导入标识符：必须是相对路径（以 ./ 开头，相对于项目根目录解析），从依赖中来的 Glob 不被支持。Glob 导入只能使用默认导入（无法使用按名导入，也无法使用 import * as ...）。

.....下一篇 我们再来写一个vuex在vite下面的模块化配置.....