关于vue异常的打包问题

今天公司项目突然遇到jenkins部署失败的问题,然后解决了好久,最终解决成功,但是部署之后访问测试环境又报了字段未定义的错误

记录一下里边的坑

  • jenkins打包报错信息:

可以看到报错原因是js操作符的问题,但关键是本地打包没有问题

那就先隐藏调es新增的操作符使用,再去jenkins打包,仍然报错

  • 此时的报错信息:
js/app.a2c71c80.js from UglifyJs

module is redeclared [js/app.a2c7

百度发现有人说是打包es6转译es5不成功,说是UglifyJs版本太低或者换成terser-webpack-plugin打包

结果:换成了terser,刚开始打包仍然报错,降低版本之后打包,再次报错:

  • 错误信息:
js/app.a2c71c80.js from Terser

module is redeclared [js/app.a2c7

这次又开始提示Terser的错了

而且这时候搞笑的出现了,本来最开始本地打包没问题,重装依赖之后本地打包也开始报jenkins上同样的错误

下一步,先解决操作符的报错,因为项目中使用了?.和?? 两个新操作符,要安装对应的babel插件

  • 安装方法:
yarn add -D @babel/plugin-proposal-optional-chaining
yarn add -D @babel/plugin-proposal-nullish-coalescing-operator
  • 然后在babel.config.js中添加代码:
module.exports = {
    plugins: ['@babel/plugin-proposal-optional-chaining', '@babel/plugin-proposal-nullish-coalescing-operator']
}

至此,操作符的错误解决了,那么再看看前边没有解决的报错信息:

module is redeclared   

可以看到提示module重复声明,然后我就全局搜索了module这个变量

果然,在项目中找到了module这个变量的声明,改一下变量名称,打包,成功

具体为什么不能使用module命名还未知。

  • 还没完,部署虽然成功了,但是一访问,我尼玛,怎么报错了

报错信息提示一个变量定义之前使用了,看了下报错变量是router里边定义的静态路由

看了下代码,定义,使用没有问题啊,是在使用之前定义的啊

  • router/index.js文件

  • store/modules/permission.js中

 看了下有说变量提升的,但很明显,我觉得我们并不是那个问题。虽然但是,那也试一下吧,const改成var,果然,不报错了。但是原因肯定不在这,用var定义变量提升了,所以自然不会报错了

接下来

跟另一个项目对比了一下,发现main.js中引入store和router顺序不一样

  • main.js

报错项目先引入router,后引入store(store中使用了router中定义的变量,个人觉得顺序没问题),抱着试试的心态,那就改改试试,结果,不报错。

咦~~~~~~~~

这是啥原因,感觉原来的顺序没问题啊

继续找。。。。。。。。

突然想会不会是router文件里边引入组件的时候就已经用到store中的数据,所以才导致报错

然后就注释了所有router中引入的组件,哎,不报错了

找到问题了,肯定是组件里边导致的,那就看看到底是哪个组件吧,最终找到了message这个组件,去组件里边看发现没用store啊

但是这个组件还引了其他的组件,就这样一层一层的找,终于找到了最后一个组件,发现这个组件里引了utils/index.js中的一个方法

  • 而utils/index.js中引了store

 对,就是这里,至此,逻辑终于理清楚了,到底为什么报错。

因为:router在文件开头(未定义报错字段之前)引入的组件内部引用了store,而store中的permission又引用了router中还未定义的字段,所以自然会报错

最后解决办法,router中不在最开始引入组件,而是在静态路由里边按需引入,问题解决。

所以其实今天的错误第一是没有引入相应的babel,第二是路由组件引入的问题(其实跟UglifyJs升不升级,换不换成terser没有关系,但因为现在基本都用terser,所以也就改了)

最后想说:在今天之前,项目正常,打包正常,启动正常,今天突然出来各种稀奇古怪的问题,虽然最后解决了,但是问题最根本的原因好像还是没有找到哎!!!

记录下自己的疑问:

1、昨天打包没问题,今天打包失败,为什么,代码层面没什么大改动,也试过回退,没有问题

2、为什么之前项目使用?? 和 ?. 操作符没有提示过报错信息

3、为什么不能使用module当变量名

4、同样的路由字段未定义那里,之前项目一点问题没有,同样的代码,

5、为什么更改store和router引用顺序(router、store改成store、router),错误消失

昨天下班了,今天来公司看了下第三个问题,也就是

  • 3、为什么不能使用module当变量名

首先在系统里js文件里 console.log(module),其实是有输出内容的,也就是说这是一个内置变量

  • 输出内容:

 可以看出里边有我们经常用的导出exports  ,然后查了下,这个变量是node为每个js文件声明的一个变量

 其实早应该想到的,经常用module.exports导出文件,怎么能忽略这个呢,还是自己业务能力不行啊

其它问题有时间再看

  • 24
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值