线上打包动态路由报错问题

Question

课程在第十一章第七节课讲解了动态路由，但是我们发现本地可以正常运行，但是打包部署到线上后报错，这是什么原因，如何解决？

Answer 1

提问者 河畔一角 2021-11-23 13:40:07

课程原本的方式：

在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()函数，因此这种方式再线上才能正常运转。