oss 部署前端项目报错 Cannot find module ‘@/views/.....‘（require和import区别）

原创已于 2022-11-10 14:02:52 修改 · 2.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端

于 2022-11-10 14:01:01 首次发布

vue2 专栏收录该内容

28 篇文章

订阅专栏

本文探讨了在若依框架中require和import的使用，指出在开发环境中require常用于动态加载，而在生产环境import实现路由懒加载。require是CommonJS的运行时加载，而import是ES6的静态加载方式。了解这两者的区别对于优化项目性能至关重要。

使用框架：项目使用的是若以框架前后端分离。

我们把项目下载下来后，可以看到若依框架里的这样一段代码：

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

详细区别参考文章：

require和import的区别 - 知乎

ES6 入门教程