vue项目打包运行报错Uncaught TypeError: ‘caller‘, ‘callee‘, and ‘arguments‘ properties may not be accessed..
vue项目通过npm run build打包后,放到服务器上访问,页面一片空白,通过F12调试发现如下报错信息:项目使用了第三方的mui框架,vue3版本支持ES6,但目前很多浏览器还不支持ES6,因此vue在build打包时,会使用Babel转码器将ES6代码转为ES5代码,从而在现有环境中执行。Babel转码器在将js文件转码为ES5时,默认使用严格模式,而在严格模式下,为了安全起见是不能用c
遇到问题:
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"]
}
更多推荐
所有评论(0)