Vue自定义插件报错

Vue自定义插件遇到的问题

// tools.js
class Tools {
	send(){
		console.log("模块化开发测试");
	}
}

Tools.install = function(Vue){
	Vue.prototype.tools = new Tools();
}

module.exports = Tools;
//main.js
import tools from "./plug/tools.js";
Vue.use(tools);

这样写插件module.exports = Tools; 导致引入报错, Uncaught TypeError: Cannot assign to read only property 'exports' of object '#'
控制台截图如下:
Vue自定义插件报错_第1张图片
出现这样错误的原因是: 在webpack打包的时候,可以在js文件中混用require和export。但是不能混用import 以及module.exports。因为webpack 2中不允许混用import和module.exports。(webpack2以上不确定,可以自己试试。)
解决办法:统一写法

// 导出
export default Tools; 

// 引入
import tools from "./plug/tools.js";

你可能感兴趣的:(vue)