Vue-cli引入Zepto.js

Vue-cli引入Zepto.js过程以及报错解决(Vue-cli2)

如有朋友需要在Vue-cli3中引入Zepto请看我另外一篇博客

附上链接：https://blog.csdn.net/wzyxdwll/article/details/88663165

按照引入Jquery的方式引入Zepto之后控制台报错如下：

TypeError: Cannot read property ‘createElement’ of undefined

在网上查阅了一下相关资料发现大致原因如下：

只使用了 AMD 规范的模块导出方法 define，没有用 CommonJs 规范的方法 module.exports 来导出模块，不过这不是造成报错的原因。

原文链接:https://sebastianblade.com/how-to-import-unmodular-library-like-zepto/

webpack需要做以下修改才能正常使用Zepto.js

步骤	修改
1	需要下载先 npm install --save-dev script-loader exports-loader
2	使用loader模块化加载Zepto.js

webpack配置示例:

// webpack.config
{
  // ...
  module: {
    loaders: [{
      test: require.resolve('zepto'),
      loader: 'exports-loader?window.Zepto!script-loader'
    }]
  }
}

页面入口文件中引入zepto.js就可以了

// entry.js
import $ from 'zepto'

如果需要全局引入可以采用引入jquery的方式以webpack插件的形式引入

可能在这里有很多同学就发现webpack的配置文件和vue-cli中的webpack.base.conf.js还是有点区别的，我在这里贴出webpack.base.conf的相关配置

{
	// ...
	module: {
		rules: [
				//...
				{
			        test: require.resolve('zepto'),
			        loader: 'exports-loader?window.Zepto!script-loader'
			    }
		]
	}
}

如果需要全局引入可以在main.js中

import $ from 'zepto'

或者在webpack.conf.base.js中

  plugins: [
      new webpack.ProvidePlugin({
			$: 'zepto',
			Zepto: 'zepto'
      }),
  ],

如有问题可以加我QQ进行交流，QQ：1197983391