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

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

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

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 入门教程