下面我将详细讲解 Vue 中遇到报错：Uncaught TypeError: Cannot assign to read only property 'exports' of object '#
报错原因
这个错误通常是因为在 Vue 升级后，在代码中使用了 CommonJS 的导出语法，即使用 module.exports 导出模块，然后又在代码中使用了 ES6 的导出语法，即使用 export 导出模块。这两种语法不能同时存在，否则会报错。
解决方法
为了解决这个错误，我们需要对代码进行相应的修改，具体操作步骤如下：
- 将所有使用
module.exports导出模块的代码改为使用export default导出模块。
例如，原来的代码：
const moduleA = {
foo: 'hello',
bar: 'world'
}
module.exports = moduleA
修改为：
const moduleA = {
foo: 'hello',
bar: 'world'
}
export default moduleA
- 检查所有使用
require导入模块的地方，确保改为使用import导入模块。
例如，原来的代码：
const moduleA = require('./moduleA')
修改为：
import moduleA from './moduleA'
示例说明
下面通过两个示例来说明解决步骤：
示例 1
假设我们的代码中存在以下两个模块文件：
moduleA.js
const moduleA = {
foo: 'hello',
bar: 'world'
}
module.exports = moduleA
moduleB.js
const moduleA = require('./moduleA')
const moduleB = {
baz: 'Vue',
qux: 'JavaScript'
}
export default moduleB
这个时候，在浏览器中执行代码，就会报错：Uncaught TypeError: Cannot assign to read only property 'exports' of object '#
要解决这个错误，我们需要将 moduleA.js 文件中的 module.exports 改为 export default，并将 moduleB.js 文件中的 require 改为 import。
修改后的代码如下：
moduleA.js
const moduleA = {
foo: 'hello',
bar: 'world'
}
export default moduleA
moduleB.js
import moduleA from './moduleA'
const moduleB = {
baz: 'Vue',
qux: 'JavaScript'
}
export default moduleB
这样就能避免报错了。
示例 2
假设我们的代码中存在以下两个模块文件：
moduleA.js
export const foo = 'hello'
export const bar = 'world'
moduleB.js
const { foo, bar } = require('./moduleA')
export { foo, bar }
这个时候，在浏览器中执行代码，也会报错：Uncaught TypeError: Cannot assign to read only property 'exports' of object '#
要解决这个错误，我们需要将 moduleB.js 文件中的 require 改为 import。
修改后的代码如下：
moduleA.js
export const foo = 'hello'
export const bar = 'world'
moduleB.js
import { foo, bar } from './moduleA'
export { foo, bar }
这样就能避免报错了。
总结一下，如果在 Vue 中出现报错：Uncaught TypeError: Cannot assign to read only property 'exports' of object '#
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：Vue报错：Uncaught TypeError: Cannot assign to read only property’exports‘ of object’#
微信扫一扫 
支付宝扫一扫 