Vue项目兼容ie9+，浏览器空白报错

项目背景

​ 项目采用vue全家桶和elementUI等插件技术，vue框架默认不支持ie8及以下，ie9+需要安装babel-polyfill插件，将项目中的es6语法转换为目标浏览器兼容的低版本语法。

注意：使用Webpack版本要高于2.6.1

基本配置

ie调试空白：babel-polyfill已配置，可跳过此节
axios对promise进行兼容，可以只用es6-promise
    先安装：
        npm install es6-promise --save-dev
    后配置main.js： 
        import promise from 'es6-promise'
        promise.polyfill() 
    跳至第3步

1. 安装babel-polyfill插件。

   npm install --save babel-polyfill

2. 在main.js中的最前面引入babel-polyfill。

   import 'babel-polyfill'

3. 在index.html加入以下代码（非必须）。

   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

4. 在config中的webpack.base.conf.js中，找到entry并修改编译配置。

   entry:{
       app: ['babel-polyfill','./src/main.js']
   }
   

5. 配置package.json文件中browserslist字段。

   "browserslist": [
       "> 1%",
       "last 2 versions",
       "not ie <= 8"
     ]
   

6. 在config中的webpack.base.conf.js中，找到loader为"babel-loader"，修改include中的内容，向其中添加resolve("static")，static文件中可能存在es6语法，提前添加该文件，下图为参照，其他内容这里不用考虑，这步只要添加static即可。
   

7. 检查目录下是否有.babelrc文件，如果没有自行创建，配置内容如下。

   {
     "presets": [
       [
         "env",
         {
           "modules": false,
           "useBuiltIns": "entry"
         }
       ],
       "stage-2"
     ],
     "plugins": [
       "transform-runtime"
     ]
   }
   

配置代码解读：
1.modules该参数的含义是：启用将ES6模块语法转换为另一种模块类型。将该设置为false就不会转换模块。默认为 commonjs. 这样做的目的是：以前我们需要使用babel来将ES6的模块语法转换为AMD, CommonJS，UMD之类的模块化标准语法，但是现在webpack都帮我做了这件事了，所以我们不需要babel来做，因此需要在babel配置项中设置modules为false，因为它默认值是commonjs, 否则的话，会产生冲突。
2.useBuiltIns是指定哪些内容需要被 polyfill(兼容) 的设置，有三个设置选项
false - 不做任何操作
entry - 根据浏览器版本的支持，将 polyfill 需求拆分引入，仅引入有浏览器不支持的polyfill
usage - 检测代码中 ES6/7/8 等的使用情况，仅仅加载代码中用到的 polyfill
3.stage-2官方预设(preset), 有两种，一个是按年份(babel-preset-es2017)，一个是按阶段(babel-preset-stage-0)。 这主要是根据TC39 委员会ECMASCRPIT 发布流程来制定的。 因此到目前为止 有4个不同的阶段预设：stage-0,1,2,3以上每种预设都依赖于紧随的后期阶段预设，也就是说stage-0是包括stage-1的，以此类推。 因此 stage-0包含stage-1/2/3的内容。所以如果我们不知道需要哪个stage-x的话，直接引入stage-0就好了。 目前一般是使用stage-2(https://babeljs.io/docs/en/babel-preset-stage-2) 该特性规范己经被起草，将会被纳入标准里.
4.transform-runtime 是利用 plugin 自动识别并替换代码中的新特性，你不需要再引入，只需要装好 babel-runtime 和 配好 plugin 就可以了。 好处是按需替换，检测到你需要哪个，就引入哪个 polyfill，如果只用了一部分，打包完的文件体积对比 babel-polyfill 会小很多。

​ 到这里一般ie空白问题解决。

ie调试仍空白解决办法

​ Ie报错问题仍然是有部分es6语法没有被转换，可能是因为使用的插件没有被转换，解决办法如下。

1. F12进入控制台，查看错误

   

2. 点击app.js跳转到出错位置

   

3. 复制出错文件路径（最前面的./不用复制）

   node_modules/image-conversion/build/conversion.js

   

4. 在config中的webpack.base.conf.js中，找到loader为"babel-loader"，修改include中的内容，将刚刚复制的路径添加到其中。

   resolve('node_modules/image-conversion/build/conversion.js')。

   

5. 其他类似的错误重复此过程，直到没有报错，空白问题解决。

其他兼容问题

​ 完成上述过程，空白已经解决，未遇到样式不兼容等问题，样式问题可参考如下（未测试）

1. 若使用了CSSvar()，安装相应的polyfill，css-vars-ponyfill。

   npm install --save css-vars-ponyfill

2. 配置main.js文件。

   import cssVars from 'css-vars-ponyfill'
   cssVars({})
   

​ 喝口水想一想静静。

简易服务器

兼容问题解决之后，可搭建简易服务器查看项目在服务器上运行的效果。

1. 打包项目 。

   npm run build

2. 进入dist文件夹。

   cd dist

3. 安装简易服务器。

   npm install http-server -g

4. 运行服务器。

   http-server

5. 结果如图，访问即可。
   

总结

​ 现在ie微软已经不在维护，兼容ie就要写或者转换成ie支持的语法，配置完调试报错也是因为项目中仍然有部分语法没有被转换，继续寻找解决办法。
参考：
https://blog.csdn.net/z1832729975/article/details/103120872
https://blog.csdn.net/landl_ww/article/details/79149461
https://www.cnblogs.com/songfengyang/p/12851813.html
https://blog.csdn.net/ligang2585116/article/details/103554818