Wiriting'JSON.stringify'在Vue组件加载时生成错误

Vic*_*ira 5 javascript webpack vue.js vuejs2

我正在编写一个Vue插件,但是当我尝试添加JSON.stringify它时,我在浏览器中出现运行时错误,页面变为空白.在我写的插件文件中的任何地方JSON.stringify我都收到错误:

未捕获的TypeError:无法分配给对象'#'的只读属性'exports'

如果我直接将JSON.stringify写入组件(例如,在'created'生命周期钩子中),则没有任何反应.

这在webpack编译期间不是错误,它只发生在浏览器里面eval.发生错误的行如下所示:

eval("/* WEBPACK VAR INJECTION */(function(module) {Object.defineProperty(__webpack_exports__ ....")
Run Code Online (Sandbox Code Playgroud)

这是插件文件中写的内容

var MyPlugin = function () {

}

JSON.stringify({})
MyPlugin.secret = 'vue-plugin-secret'

MyPlugin.install = function (Vue, options) {

}

module.exports = MyPlugin

// export default MyPlugin
Run Code Online (Sandbox Code Playgroud)

这就是我在组件中得到它的方式:

var MyPlugin = require('./MyPlugin')
Run Code Online (Sandbox Code Playgroud)

如果我评论该JSON.stringify行错误就会停止.

@编辑

做了什么@Saurabh建议,使用'import'所以我不得不改变插件的导出形式

//MyPlugin.js
export default MyPlugin
Run Code Online (Sandbox Code Playgroud)

在我做的.vue组件中

import MyPlugin from './MyPlugin';
Run Code Online (Sandbox Code Playgroud)

这修正了错误,但是这是什么原因?一些webpack配置?(我使用的是默认webpack配置vue-cli)