Vue-cli3.0兼容IE11的方法

Vue3.0兼容IE方法
因为项目需要,必须在IE11上跑现在已经写好的项目。目前的状况是在Chrome上可以顺利的跑起来,在IE就会出现白屏的情况,也会出现下列错误。
会出现各种各样奇怪的语法错误,我猜测是ES6语法IE不支持的缘故
会出现各种各样奇怪的语法错误,我猜测是ES6语法IE不支持的缘故。
因为本人也是前端菜鸟,所以花了不少时间,才研究出了一个兼容方法。这里跟大家分享一下,也加深一下自己的理解和记忆。
首先需要Babel-polyfill
Babel默认只转换新的JavaScript句法(syntax),而不转换新的API,比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象,所以现在需要Babel-polyfill来实现
①首先安装插件

cnpm install --save --dev babel-polyfill 

安装完成后,跑项目的时候可能会出现缺少其他插件,这时候重新运行一遍
npm install即可
②在Vue项目中引入babel-polyfill(main.js)

import 'babel-polyfill'

③配置webpack
因为VUE-CLI3.0中隐藏了webpack.config.js 研究了很久在vue.config.js中配置入口没有成功。所以采取了另外一种方式。使用

vue inspect > output.js

执行该命令后,根目录就会产生一个名为 output.js 的文件,在文件中找到entry

  entry: {
    app: [
      './src/main.js'
    ]
  }

将其替换为

  entry: {
    app: [
      "@babel/polyfill", "./src/main.js"
    ]
  }

用次方法修改了webpack的入口信息。个人理解应该是通过vue.config.js中可以直接配置webpack入口,但是本人技术有限,不知道如何配置,有熟悉配置的大佬希望可以指教一下。

你可能感兴趣的:(Vue-cli3.0兼容IE11的方法)