使用框架:项目使用的是若以框架前后端分离。
我们把项目下载下来后,可以看到若依框架里的这样一段代码:
export const loadView = (view) => {
if (process.env.NODE_ENV === 'development') {
return (resolve) => require([`@/views/${view}`], resolve)
} else {
// 使用 import 实现生产环境的路由懒加载
return () => import(`@/views/${view}`)
}
}
这段代码的含义就是导入views文件夹下的文件。在开发环境使用的是require导入,其他环境用的是import,那么这里就涉及到了这两个导入的区别了。
require/import区别
ES6 之前制定了一些模块加载方案中包括CommonJS,而ES6也实现了模块功能,而且相当简单。
require/exports 是运行时加载,import/export 是编译时加载
ES6 模块不是对象,而是通过export
命令显式指定输出的代码,再通过import
命令输入,在静态资源编译时就加载,称为“编译时加载”或者静态加载。
CommonJS 模块就是对象(即 module.exports 属性),输入时必须查找对象属性,该对象只有在脚本运行完才会生成,称为“运行时加载”。
解决方案:使用require导入
export const loadView = (view) => {
// if (process.env.NODE_ENV === "development") {
// return (resolve) => require([`@/views/${view}`], resolve);
// } else {
// // 使用 import 实现生产环境的路由懒加载
// return () => import(`@/views/${view}`);
// }
return (resolve) => require([`@/views/${view}`], resolve);
};
另一种解决方案,可以一试:https://www.jb51.net/article/191769.htm
详细区别参考文章: