webpack+vue3+TS拼接动态require路由报错Module parse failed: Unexpected token (1:10)

webpack+vue3+TS拼接动态require路由报错Module parse failed: Unexpected token (1:10)

大家肯定遇到过 文件引用 或 图片导入时由静态地址变为动态地址
即 require( ‘…/assets/img/login.png’) ==> require( 变量 + ‘文件名’)
明明在动态拼接的时候打印出来的路径是没有问题的
但是如此const route = require('../router/main' + key.split('.')[1])拼接之后会报错说找不到对应的模块文件
原因就是 由于 webpack 的原因，require 只支 持纯静态 或 变量+静态 地址两种;

问题描述

问题：

webpack+vue3+TS拼接动态require

路由报错Module parse failed: Unexpected token (1:10)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders{“version”:3,“file”:“user.js”,“sourceRoot”:“”,“sources”:[“user.ts”],“names”:[],“mappings”:“AAAA,MAAM,IAAI,GAAG,GAAG,EAAE,CAAC,MAAM,CAAC,mCAAmC,CAAC,CAAA;AAC9D,eAAe;IACb,IAAI,EAAE
,mBAAmB;IACzB,IAAI,EAAE,MAAM;IACZ,SAAS,EAAE,IAAI;IACf,QAAQ,EAAE,EAAE;CACb,CAAA”}

 const routeFiles = require.context('@/router/main', true, /\.ts/)
    routeFiles.keys().forEach((key) => {
        const route = require('../router/main' + key.split('.')[1])
        allRoutes.push(route.default)
    })

---

---

解决方案：

 const routeFiles = require.context('@/router/main', true, /\.ts/)
    routeFiles.keys().forEach((key) => {
        const route = require('../router/main' + key.split('.')[1] + '.ts')
        allRoutes.push(route.default)
    })

动态导入语法必须是字符串拼接，不能传入函数。
正确：import('./src' + args + '.index')
错误：import(someFn())

动态导入变量必须以./ 或者webpack设置的alias开始进行字符串拼接。
import('./src' + args + '/index.js')