Uncaught TypeError: Cannot assign to read only property 'exports' of object '

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文件路径，因为 import 和 export 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