线上打包动态路由报错问题
来源：11-9 章节总结
河畔一角
2021-11-23
课程在第十一章第七节课讲解了动态路由，但是我们发现本地可以正常运行，但是打包部署到线上后报错，这是什么原因，如何解决？
1回答
-
河畔一角
提问者
2021-11-23
课程原本的方式：
在router/index.js中，通过`loadAsyncRoutes`加载动态路由
```js
async function loadAsyncRoutes() {
let userInfo = storage.getItem('userInfo') || {}
if (userInfo.token) {
try {
const { menuList } = await API.getPermissionList()
let routes = utils.generateRoute(menuList)
routes.map(route => {
let url = `./../views/${route.component}.vue`
route.component = () => import(url);
router.addRoute("home", route);
})
} catch (error) {
}
}
}
```
改正后方案：
```js
async function loadAsyncRoutes() {
let userInfo = storage.getItem('userInfo') || {}
if (userInfo.token) {
try {
const { menuList } = await API.getPermissionList()
let routes = utils.generateRoute(menuList)
const modules = import.meta.glob('../views/*.vue')
console.log('views',modules)
routes.map(route => {
let url = `../views/${route.name}.vue`
route.component = modules[url];
router.addRoute("home", route);
})
} catch (error) {
}
}
}
```
由于通过impor(url)的方式，程序不能识别出来哪些文件需要打包构建，因此导致views下面的vue文件都没有打包进去，线上无法访问。
通过import.meta.glob可以读取本地文件，打包构建时会全部进行按需编译，modules对应是一个Object对象，key为路径，value为()=>import()函数，因此这种方式再线上才能正常运转。
00
相似问题