[Vue warn]: $attrs is readonly; Webpack externals configuration

The project error

[Vue warn]: $attrs is readonly.
[Vue warn]: $listeners is readonly.
Copy the code

why

Repeat introduction of Vue

The solution

On webpack configuration:

  externals: {
    vue: {
      root: 'Vue'.commonjs: 'vue'.commonjs2: 'vue'.amd: 'vue',}},Copy the code

aboutexternalsThe understanding of the

Instead of packing Vue into a bundle, the bundle is sent to its runtime environment to find Vue dependencies. Let the runtime decide which version of VUE to use.

Vue dependencies are declared in the bundle

(function webpackUniversalModuleDefinition(root, factory) {
	if(typeof exports === 'object' && typeof module= = ='object')
		/ / commonjs2 form
		module.exports = factory(require("vue"));
	else if(typeof define === 'function' && define.amd)
		/ / form of AMD
		define(["vue"], factory);
	else if(typeof exports === 'object')
		/ / commonjs form
		exports["YouLibrary"] = factory(require("vue"));
	else
		// Global variable
		root["YouLibrary"] = factory(root["Vue"]); }) (window.function(__WEBPACK_EXTERNAL_MODULE_vue__) {... });Copy the code

Instead of packing imported packages into the bundle, obtain these external dependencies at runtime.

Document externals