关于动态路由的import()

Question

根据文档的建议
使用import()动态注入时，应使用以./或../开头的，以文件后缀结尾的模板字符串，如

import(`./foo/${bar}.js`);

如果按照老师的方式

let url = `./../views/${route.component}.vue`
route.component = () => import(url);

命令行工具会报出如下警告

The above dynamic import cannot be analyzed by vite.
See https://github.com/rollup/plugins/tree/master/packages/dynamic-import-vars#limitations for supported dynamic import formats. If this is intended to be left as-is, you can use the /* @vite-ignore */ comment inside the import() call to suppress this warning.

警告中也指出了消除警告的方法，即用/* @vite-ignore */在import()内部注释一下，即

let url = `./../views/${route.component}.vue`
route.component = () => import(/* @vite-ignore */ url)

但如果直接将代码改为

route.component = () => import(`./../views/${route.component}.vue`);

有可能因为route.component无法识别而报错，所以可以先使用一个变量接收route.component再在模板字符串中使用，即

let _component = route.component
route.component = () => import(`./../views/${_component}.vue`);

如果改的话记得在router -> index.js和view->Login.vue中都要改

Answer 1

河畔一角 2021-06-18 13:42:39

好的，回头试一下，感谢反馈。