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"]
}

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

我的个人博客有空来坐坐

https://www.wangyanan.online

Logo

前往低代码交流专区

更多推荐