dcloudio / dcloudio/uni-app

uni-app项目使用vue-styleguidist时事件无法正常响应

Open
#1,967 0 comments 0 reactions 0 assignees View on GitHub
Good!完整的提问 h5 vue2 提供了复现方案
Dominant language
JavaScript
Stars
41.6k
Forks
3.7k
Avg merge
7h 6m
Merged PRs (30d)
6

Description

**问题描述**
[问题描述:尽可能简洁清晰地把问题描述清楚]

uni-app创建项目,按照vue-styleguidist的[cli 3 安装指引](https://vue-styleguidist.github.io/VueCLI3doc.html)进行安装,由于在vuecli3 项目里能够正常使用,初步怀疑是uni-app修改webpack配置导致。安装后打开 `http://localhost:6060/`即可看到styleguide的默认示例,默认示例里按钮是可以点击的,由于没有任何可以看到的事件效果,只要代码不报错即正常。

为正常看到事件效果可修改`src/components/AppButton.vue`文件下的`handerClick`方法添加`console.log('11')`即可正常看到问题。

**复现步骤**
[复现问题的步骤]

1. 通过`vue add styleguidist` 安装`vue-styleguidist`,安装完成
2. 运行`npm run styleguide`
3. 浏览器打开`http://localhost:6060`页面正常显示
4. 点击example下面的橘色按钮`Push Me`
5. 打开控制台即可看到报错信息

[或者可以直接贴源代码]
```js
/***/ "./node_modules/@dcloudio/vue-cli-plugin-uni/packages/vue-loader/lib/loaders/templateLoader.js?!./node_modules/@dcloudio/vue-cli-plugin-uni/packages/webpack-preprocess-loader/index.js?!./node_modules/@dcloudio/vue-cli-plugin-uni/packages/webpack-uni-app-loader/filter-modules-template.js!./node_modules/@dcloudio/vue-cli-plugin-uni/packages/webpack-uni-app-loader/page-meta.js!./node_modules/@dcloudio/vue-cli-plugin-uni/packages/vue-loader/lib/index.js?!./node_modules/@dcloudio/vue-cli-plugin-uni/packages/webpack-scoped-loader/index.js!./src/components/AppButton.vue?vue&type=template&id=0150f468&":
/*!****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
!*** ./node_modules/@dcloudio/vue-cli-plugin-uni/packages/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@dcloudio/vue-cli-plugin-uni/packages/webpack-preprocess-loader??ref--19-0!./node_modules/@dcloudio/vue-cli-plugin-uni/packages/webpack-uni-app-loader/filter-modules-template.js!./node_modules/@dcloudio/vue-cli-plugin-uni/packages/webpack-uni-app-loader/page-meta.js!./node_modules/@dcloudio/vue-cli-plugin-uni/packages/vue-loader/lib??vue-loader-options!./node_modules/@dcloudio/vue-cli-plugin-uni/packages/webpack-scoped-loader!./src/components/AppButton.vue?vue&type=template&id=0150f468& ***!
\****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/*! exports provided: render, staticRenderFns, recyclableRender, components */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "render", function() { return render; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "staticRenderFns", function() { return staticRenderFns; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "recyclableRender", function() { return recyclableRender; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "components", function() { return components; });
var components
var render = function() {
var _vm = this
var _h = _vm.$createElement
var _c = _vm._self._c || _h
return _c(
"div",
{
style: _vm.styles,
on: {
click: function($event) {
arguments[0] = $event = _vm.$handleEvent($event)
_vm.handleClick1.apply(void 0, arguments)
}
}
},
[_vm._t("default")],
2
)
}
var recyclableRender = false
var staticRenderFns = []
render._withStripped = true
/***/ }),

```
**预期结果**
控制台不报错,事件能够正常响应

**实际结果**
控制台报错事件无法正常响应
![image](https://user-images.githubusercontent.com/4387721/89101318-6b7c0f80-d431-11ea-80bf-a7327c6e261b.png)
![image](https://user-images.githubusercontent.com/4387721/89101352-ab42f700-d431-11ea-81b5-b5a3de129fe5.png)

**系统信息:**
- 发行平台: H5
- 操作系统 :chrome
- HBuilderX版本:未使用
- uni-app版本 [如使用Vue-cli创建/运行项目,则提供`npm run info`的运行结果]
uni-app v2.8.3
uni-app cli v2.0.0-28320200727001
- 设备信息 [如 iPhone8 Plus] :浏览器

**补充信息**
[可选]
[根据你的分析,出现这个问题的原因可能在哪里?]
由于在vuecli3 创建的项目里能够正常使用(特意用vuecli3重新生成个项目安装styleguidist发现正常使用),初步怀疑是uni-app修改webpack配置导致,浏览器端定位到代码见图片

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.