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.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'
}),
],
【Vue-cli引入Zepto.js】如有问题可以加我QQ进行交流，QQ：1197983391
推荐阅读
- Python|Python实战（使用线性回归预测房价）
- python|requests库请求获取不到数据怎么办（不妨试试看这种妙法）
- paas开发平台|GForms展现服务云开发平台
- 解决php网页运行超时问题:Maximum execution time of 30 seconds exceeded
- JavaEE开发|Java EE 8的五大新特性详解
- Web开发|FastJSON 简介及其Map/JSON/String 互转
- Web开发|解决WampServer服务器离线问题
- 服务器|怎样配置apache虚拟主机
- PythonWeb_Django(1)
- 多线程练习-两个线程交替打印