vue动态路由异步加载import组件，加载不到module的问题

黄粱一梦2024-03-0611

vue动态添加路由使用addRoute()方法加载路由组件，页面报错

路由信息由后端给出，那么前端需要动态加载路由，同时component的路径也是后端给出，但是动态加载该路径会报错

问题复现

服务器端代码

const express = require('express')
const app = express()

app.get('/routes',(req, res) => {
    res.setHeader('Access-Control-Allow-Origin','*')
    res.send({
       code: 200,
       data:{
           routes:[
               {
                   path: '/',
                   name: 'home',
                   component: '/views/home.vue'
               },{
                   path:'/home',
                   component: '/views/home.vue'
               },{
                   path: '/detaile',
                   component: '/views/detaile.vue',
                   alias:  '/as'
               }
           ]
       }
    })
})

app.listen(1423,() => {
    console.log('当前端口已经开启')
})

前端代码

/* 动态添加路由 */
fetch('http://localhost:1423/routes').then(res => res.json()).then(son => {
  console.log('son',son);
  generateRoutes(son.data.routes).map(ir => {
    let comurl = `${ir.component}`
    console.log(comurl)
    // let str = '@/views/home/home.vue'
    let component = () => import(`@/views${ir.component}`)
    router.addRoute('/',{component,path:ir.path})
    // router.addRoute('/',{component:()=> import('@'+ ir.component +'.vue'),path:'/detaile'})
  })
  console.log('当前路由表数据为',routes);
})

结果报错

解决方法

刚开始在网络上面找到的方法差不多都是将import方法改为require方法来引入

但是使用写死的静态路径是可以引入…

原因应该是在webpack，webpack 编译es6 动态引入 import() 时不能传入变量，因为webpack的现在的实现方式不能实现完全动态

// 假如path = '@/views/user'
const com = () => import(path) // 这样会报错哦
 
const com2 = () = > import('@/views/user') // 这样写死的字符串就可以

试了上面的方法还是无效,琢磨半天之后,想了一下如果多写一层文件的路径会怎么样？

于是，改了一下服务端的输出将前缀views去除

const express = require('express')
const app = express()

app.get('/routes',(req, res) => {
    res.setHeader('Access-Control-Allow-Origin','*')
    res.send({
       code: 200,
       data:{
           routes:[
               {
                   path: '/',
                   name: 'home',
                   component: '/home.vue'
               },{
                   path:'/home',
                   component: '/home.vue'
               },{
                   path: '/detaile',
                   component: '/detaile.vue',
                   alias:  '/as'
               }
           ]
       }
    })
})

app.listen(1423,() => {
    console.log('当前端口已经开启')
})

此时动态添加的路由显示正常
Alt text

::: tip
修改文件的对比
:::

//  修改前
routes:[
        {
            path: '/',
            name: 'home',
            component: '/views/home.vue'
        },{
            path:'/home',
            component: '/views/home.vue'
        },{
            path: '/detaile',
            component: '/views/detaile.vue',
            alias:  '/as'
        }
    ]
//  修改后
 routes:[
        {
            path: '/',
            name: 'home',
            component: '/home.vue'
        },{
            path:'/home',
            component: '/home.vue'
        },{
            path: '/detaile',
            component: '/detaile.vue',
            alias:  '/as'
        }
    ]