遇到问题:

vue项目通过npm run build打包后,放到服务器上访问,页面一片空白,通过F12调试发现如下报错信息:

Uncaught TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them 

原因分析:

项目使用了第三方的mui框架,vue3版本支持ES6,但目前很多浏览器还不支持ES6,因此vue在build打包时,会使用Babel转码器将ES6代码转为ES5代码,从而在现有环境中执行。

Babel转码器在将js文件转码为ES5时,默认使用严格模式,而在严格模式下,为了安全起见是不能用caller,callee,arguments等属性的。因此mui.js转码会出问题,导致以上报错!

解决方法一:

1、在vue项目的根目录创建.babelrc配置文件,在.babelrc里添加如下代码:

{
/* babel在将js文件转码为ES5时,默认使用严格模式,而在严格模式下,
为了安全起见是不能用caller,callee,arguments等属性的,
所以我们要在.bablerc配置中忽略mui.js的转码 */
"ignore": [
   "./src/assets/lib/mui/js/mui.js",
    "./src/assets/lib/mui/js/mui.min.js"
  ]
}

2、在vue项目的根目录创建.eslintignore配置文件,在.eslintignore里添加如下代码:

src/lib/mui/js

说明:.eslintignore可以忽略语法检查,vue不会检查第三方js的语法错误!

解决方法二(推荐):

另直接在webpack打包时,把严格模式禁用掉 ,方法如下:

1、安装以下

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

.babelrc文件中添加如下代码:

{
  "plugins": ["transform-remove-strict-mode"]
}
Logo

前往低代码交流专区

更多推荐