1、问题描述

项目之前正常的路由配置是这样的:

 

2、路由配置说明

第一种做法:

每个页面模块目录通过一个 index.js 主入口来导出(module.exports)对应的vue文件,然后 router.js 中通过 require 方法去引入资源。

这一做法是没毛病的,因为这是组织(webpack 2)允许的。

第二种做法:

如果好好的require不用,非要用 import 那么请不要和 module.exports 混合服用,因为这是组织不允许的,此时便会报标题的错。

(Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>')

第三种做法:

如果你还是要用 import 方法来引入资源的话,你可以放弃 module.exports ,直接引入vue文件路径,因为 importexport default 是组织运行的。

 

3、结论

综上,我们要知道组织允许什么样的操作,不允许什么样的操作!

exports 导出的东西需要 require 引入!

export 导出的东西需要 import 引入!

上面说了那么多,其实归根结底就一句话!

在webpack 2中不允许混用 import 和 module.exports

 

4、再废话几句

其实正确地去理解这个报错的话,就一定要去整明白 require 和 import 的区别!

node编程中最重要的思想就是模块化,import和require都是被模块化所使用。

1、遵循规范

require exports CommonJS的一部分

import export ES6的新规范,如果要兼容浏览器的话必须转化成es5的语法

2、调用时间

require运行时调用,所以require理论上可以运用在代码的任何地方

import编译时调用,所以必须放在文件开头

3、本质

require赋值过程,其实require的结果就是对象、数字、字符串、函数等,再把require的结果赋值给某个变量

import解构过程,但是目前所有的引擎都还没有实现import,我们在node中使用babel支持ES6,也仅仅是将ES6转码为ES5再执行,import语法会被转码为require

ps:最后,我把项目中的各种index.js 都删掉了,采用正确做法2来引入对应的文件。弃 require 从 import ~

 

参考链接:

Node中没搞明白require和import,你会被坑的很惨

import和require的区别

vue模块报错-1

vue模块报错-2

Logo

前往低代码交流专区

更多推荐