使用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对象上

终于结束啦 !