耗费了我半天时间解决的问题,费了半条老命,一定要给解决过程记录下来。

事情最开始是项目部署在客户那边,客户的谷歌浏览器版本太低,导致界面访问空白,控制台报错

symbol is not defined

上网查了相关资料,需要使用 babel-polyfill插件,把es6的语法转换成es5的语法

cnpm install babel-polyfill -save

//安装成功后,在main.js里面引入该插件
import 'babel-polyfill';
注:引入的这行,必须写在最前面,第一行,我之前就是没有写在最前面,一直不起效果,研究了老半天,看到别的博主说要写在最前面,这才知道

//webpack项目在webpack.base.conf.js里面配置(我的项目是多页面,单页面的同理这样写即可);
entry:{
    index: ["babel-polyfill", "./src/pages/index/main.js"],
    admin: ["babel-polyfill", "./src/pages/admin/main.js"]
},

我怀着期待的心情,更新了项目后,还是报这个错,但这次是vue-axios.js报错,就上网查了下,看到有解决低版本浏览器不支持Promise的问题解决

cnpm install es6-promise --save

//在main.js配置,放在前面配置的babel-polyfill下面配置即可
import Es6Promise from 'es6-promise';
require('es6-promise').polyfill();
Es6Promise.polyfill();
import 'es6-promise/auto';

再次更新项目以为这次稳妥了,管理端可以正常访问,用户端有几个页面访问不了,报了新的错误:Use of const in strict mode  报错是在打包后的13.1641548976733.js和9.1641548976733.js;上网查了下该报错是"在严格模式下使用const“通俗来说就是该浏览器不支持const的使用

第一步:想法很天真,把访问不了的页面里面的const声明,都改成了let,然后重新打包了整个项目,打包后的js还是有const   --------------------  失败

第二步:先查看13.1641548976733.js里面Const的声明在哪,再打开对应的13.1641548976733.js.map,找到对应的依赖js

第三步:打开webpack.base.conf.js,把上面的js配置到babel-loader下面   --------   成功

最后一次更新项目,成功解决问题,半天的时间也过去了,但不管怎么说,在解决问题的过程中也了解到了很多新的知识点,虽然耗费了很多时间。。。。

Logo

前往低代码交流专区

更多推荐