vue中引入mui.js各种报错解决方案

阳光穿透心脏的1/2处 2022-11-12 08:27 283阅读 0赞

项目中使用到了 mui.js 的顶部滚动条，遇到的一系列坑总结  
mui 没有发布npm 版本，需要相关文件可以去这个地址下载[ https://github.com/dcloudio/mui][https_github.com_dcloudio_mui]

滚动条组件 `scroll` 需要借助于 MUI 中的 tab-top-webview-main.html`需要把 slider 区域的` mui-fullscreen\` 类去掉

#### 引入 mui.min.js 文件，使用了 Eslint 报错 ####

在 `.eslintignore` 文件中排除掉 js 文件，如果没有 `.eslintignore` 文件，可以自己新建一个

src/lib/mui/js/mui.min.js

#### 滑动条无法正常触发滑动，通过检查官方文档，发现这是JS组件，需要被初始化一下： ####

import mui from '@/lib/mui/js/mui.min.js'
    ...
        mounted() {  
          mui('.mui-scroll-wrapper').scroll({ 
              deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
          });
        },
     ...

我们在初始化滑动条的时候，导入了mui.min.js ，但是，

#### 控制台报错：`Uncaught TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them` ####

经过合理推测，可能是 mui.js 中用到了 ‘caller’,‘callee’,and 'arguments’东西，但是，webpack 打包好的 bundle.js 中，默认是启用严格模式的，所以，这两者冲突了  
解决方案：把 webpack 打包时候的严格模式禁用掉  
[webpack移除严格模式][webpack]  
移除严格模式，使用这个插件:`babel-plugin-transform-remove-strict-mode`  
安装

npm install babel-plugin-transform-remove-strict-mode

修改 `.babel.config.js` 文件

module.exports = { 
      plugins: [
        'transform-remove-strict-mode'
      ],
      ignore: [
        './src/lib/mui/js/mui.min.js'
      ]
    }

#### 使用 mui 的滑动组件，Chrome 报警告 ####

添加 css 样式

*{ 
      touch-action:pan-y;
    }

[https_github.com_dcloudio_mui]: https://github.com/dcloudio/mui
[webpack]: https://github.com/genify/babel-plugin-transform-remove-strict-mode