使用webpack-cli或vue-cli 解决ie兼容性与报错问题
1.项目中使用vue-cli3
IE11白屏 报错 SCRIPT1002 语法错误 和 报错SCRIPT1006: 缺少 ')'的解决
1.1 先用npm下载 @babel/polyfill;或 babel-polyfill
npm install babel-polyfill -D
下载完成后
在main.js 最上面引入 import 'babel-polyfill' 或 import '@babel/polyfill'
import 'babel-polyfill'
1.2 在vue.config.js 的 module.exports : {} 中添加
configureWebpack: config => { config.entry.app = ["babel-polyfill", "./src/main.js"]; },
1.3 在babel.config.js中添加
presets: [["@vue/app", {useBuiltIns : "entry"}] ],
1.4 没有被编译的依赖报错
如果还有报错就可能就是你自己本地或者node_modules里的一些依赖不兼容IE了
在vue.config.js中添加transpileDependencies属性 添加地址 请注意格式 要使用正则匹配的方式
假设:下图是报错的依赖(我随便找的 ie报错的地方点进去往上找就找到了)
那就
transpileDependencies: [/[/\\]node_modules[/\\]echarts[/\\]lib[/\\]chart[/\\]graph[/\\]/,/[/\\]node_modules[/\\][@\\]test2[/\\]test3[/\\]/],
2.项目中使用webpack-cli
IE11白屏报错 SCRIPT1002 语法错误 和 报错SCRIPT1006: 缺少 ')'的解决
我使用的是webpack4 webpack-cli3.x
2.1首先 还是先下载babel-polyfill包
npm install babel-polyfill -D
2.2 在webpack.base.conf.js中修改
把 entry: { app: './src/main.js' } 更换为 entry: { app: ["babel-polyfill", "./src/main.js"]},
entry: { app: ["babel-polyfill", "./src/main.js"]},
接下来处理js
在module下的rules下的对象中 使用include来选择处理哪些js(可以在浏览器看哪些模块报错)
{test: /\.js$/,loader: 'babel-loader',include: [resolve('src'),resolve('test'),resolve('node_modules/webpack-dev-server/client'),resolve('node_modules/resize-detector/esm'),resolve('node_modules/vue-echarts/components'),]},
2.3 在.babelrc文件中添加
"presets": [["env",{"modules": false,"useBuiltIns": "entry", // 重点"targets": {"browsers": ["> 1%","last 2 versions","not ie <= 8"]}}],"stage-2"],
解决完这些问题之后 我发现我还是有报错
ie 报错SCRIPT5022: SecurityError sockjs.js (1683,3)
经过百度一番后 找到/node_modules/sockjs-client/dist/sockjs.js 1605行
try {// self.xhr.send(payload);} catch (e) {self.emit('finish', 0, '');self._cleanup(false);}};
把这行注掉就好啦!
IE报错: ACCESS-CONTROL-ALLOW-HEADERS 列表不存在请求表头 CONTENT-TYPE;XMLHTTPREQUEST:网络错误 0X80070005,拒绝访问。
后端设置Access-Control-Allow-Headers时不要直接写 ['*']号
要改成authorization,Authorization,DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type
亲测好用~
如果还有 SCRIPT1002: 语法错误这个报错 就把 index.html引入的js改为在main.js里使用import引入 再挂载到window对象上
终于结束啦 !
使用webpack-cli或vue-cli 解决ie兼容性与报错问题相关推荐
- 为 VUE 项目添加 PWA 解决发布后刷新报错问题
为 VUE 项目添加 PWA 解决发布后刷新报错问题 参考文章: (1)为 VUE 项目添加 PWA 解决发布后刷新报错问题 (2)https://www.cnblogs.com/morang/p/9 ...
- vue 动态加载图片路径报错解决方法
vue 动态加载图片路径报错解决方法 参考文章: (1)vue 动态加载图片路径报错解决方法 (2)https://www.cnblogs.com/qingcui277/p/8930507.html ...
- uglifyjs报错 webpack_vue 解决uglifyjs-webpack-plugin打包出现报错的问题
楼主最新对已做项目进行打包优化,配置了打包环境下去除console.log语句插件---使用uglifyjs-webpack-plugin 具体代码如下 npm install uglifyjs-we ...
- ueditor上传图片回调_(常见解决方法)UEditor报错“后端配置项没有正常加载,上传插件不能正常使用”...
(常见解决方法)UEditor报错"后端配置项没有正常加载,上传插件不能正常使用"_向来萧瑟也无畏-CSDN博客blog.csdn.net 报错信息 详见此文的"排错过 ...
- 搭建dubbo项目解决dubbo.xml标签报错的问题
搭建dubbo项目解决dubbo.xml标签报错的问题 参考文章: (1)搭建dubbo项目解决dubbo.xml标签报错的问题 (2)https://www.cnblogs.com/ajax-li/ ...
- 解决Mac安装tesserocr报错问题 Failed building wheel for
解决Mac安装tesserocr报错问题 Failed building wheel for 参考文章: (1)解决Mac安装tesserocr报错问题 Failed building wheel f ...
- [解决方法] spring-data-mongo 配置报错org.springframework.beans.factory.BeanCreationException
[解决方法] spring-data-mongo 配置报错org.springframework.beans.factory.BeanCreationException 参考文章: (1)[解决方法] ...
- 解决JavaWeb项目代码报错
解决JavaWeb项目代码报错 说明:JavaWeb项目代码报错的处理流程 处理流程 重新执行代码,避免上一次运行错误的影响 查看Tomcat报错信息 参考文章:idea中查看错误日志 如果是在ide ...
- 解决VS2017使用scanf报错问题
解决VS2017使用scanf报错问题 当然也可以解决其他版本的scanf报错问题.总之要求使用scanf_s不允许使用scanf都可以解决 解决方法:添加一个宏定义 #pragma warning( ...
最新文章
- php生成指定范围随机数两位小数_python学习之随机数函数
- KeyDown、KeyPress和KeyUp事件的区别与联系
- Python基础:一起来面向对象 (二) 之搜索引擎
- CSS列表和一些变化情况
- 【虚拟化】docker部署Rabbitmq
- 工作85:过滤器的使用
- 操作系统(王道笔记第二章)
- 计算机虚拟现实技术论文好写吗,虚拟现实技术的论文
- wpf 文件上传到服务器_07-文件上传到阿里云OSS实战(一)
- 拆解嘀嗒出行赴港IPO招股书:顺风车市占率近七成 2019年起实现盈利
- 考研南邮和杨大计算机,江苏省这4所“非211”低调有实力,从不争名次,毕业生颇受欢迎...
- RUI手机桌面,开年大更新绝对值得拥有!
- IE浏览器查看浏览器缓存Session
- 免费的MySQL数据库
- STM32F103C8T6开发环境的搭建
- phrases practice_Choose any passage from unit 3 and unit 4 to practice.
- 如果你恨一个人...
- ThinkPHP框架执行流程源码解析
- 简述什么是FBV和CBV
- Wireshark怎么抓包、wireshark抓包详细图文教程 [最新绿色版本version 2.6.1 ]