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

1. 错误：

vue 运行时报错：Cannot assign to read only property 'exports' of object '#<Object>'

2. 解决过程：

搜索一些方法都是在说 webpack 同一个文件 不可以用 import 引入然后再用 module.exports 输出,只能用 export 输出

weeks.js

module.exports = {
	mon: '周一',
    tue: '周二',
}

month.js

export default {
	jan: '一月',
    feb: '二月',
}

lang.js

import weeks from './weeks' //或者 const weeks = reuqire('./weeks')
import month from './month' //或者 const month = reuqire('./month').default 

export default {
	...weeks,
	...month,
}

所以符合上面对应的规则可以解决一部分报错问题。

但是只要他们对应使用就不会出问题了吗？？？我试了一下一般状况是可以行得通的，但是下面这种情况还是报同样的错误：

lang.js

const weeks = reuqire('./weeks')
module.exports = {
	...weeks,
	jan: '一月',
    feb: '二月',
}

具体原因我也没搞懂（我自己猜想...扩展运算符在这里类似于import，所以不能通过module.exports输出），下面来直接上解决方案

3. 解决方法：

方式1：用export default 输出

lang.js

const weeks = reuqire('./weeks')
export default {
	...weeks,
	jan: '一月',
    feb: '二月',
}

方式2：配置babelrc

lang.js无需更改，只需要配置.babelrc即可，首先下载相应babel插件

npm install babel-plugin-transform-es2015-modules-commonjs -D

在 .babelrc 中增加一个plugins

{
	"plugins": ["transform-es2015-modules-commonjs"]
}

以上两种方式都解决了我所写的报错，第二种方法感谢泛舟江湖的文章。第二种方式可以不用考虑import和module.exports是否混用

我的个人博客有空来坐坐

https://www.wangyanan.online