[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