[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