[Vue warn]: $attrs is readonly；Webpack externals 配置

项目报错

[Vue warn]: $attrs is readonly.
[Vue warn]: $listeners is readonly.

原因

重复引入 Vue

解决方法

在webpack中配置上：

  externals: {
    vue: {
      root: 'Vue',
      commonjs: 'vue',
      commonjs2: 'vue',
      amd: 'vue',
    },
  },

关于externals的理解

不将Vue打包到bundle中，而是让打好的包bundle去它的运行环境中找Vue的依赖。让运行环境决定用哪个版本的vue。

bundle中声明了对Vue依赖

(function webpackUniversalModuleDefinition(root, factory) {
	if(typeof exports === 'object' && typeof module === 'object')
		// commonjs2 形式
		module.exports = factory(require("vue"));
	else if(typeof define === 'function' && define.amd)
		// AMD 形式
		define(["vue"], factory);
	else if(typeof exports === 'object')
		// commonjs 形式
		exports["YouLibrary"] = factory(require("vue"));
	else
		// 全局变量形式
		root["YouLibrary"] = factory(root["Vue"]);
})(window, function(__WEBPACK_EXTERNAL_MODULE_vue__) {
    ......
});

防止将某些 import 的包(package)打包到 bundle 中，而是在运行时(runtime)再去从外部获取这些扩展依赖(external dependencies)。

文档 externals