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