vue2.x兼容ie9+的解决方案与调试

版权声明： https://blog.csdn.net/GoldenLegs/article/details/82285929

1.ie9以上的调试

ie控制台若不显示调试内容,可以下载补丁(IE11-Windows6.1-KB3008923-x64.msu)，安装之后就好了。

下载链接：https://www.microsoft.com/zh-cn/download/confirmation.aspx?id=45154

之后若浏览器报Array.includes()等等一系列es6语法的错误,说明是兼容的问题,请继续往下阅读

2.解决兼容

     参考尤大的解答 https://github.com/vuejs-templates/webpack/issues/260

1. 首先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:{
    app:['babel-polyfill','./src/main.js']      
}

当然，如果你只用到了 axios 对 promise进行兼容，可以只用 es6-promise

npm install es6-promise --save

在 main.js 中的最前面 引入

import 'es6-promise/auto'

完成以上配置，ie9兼容就完成了

那么，就有一个问题了，build之后的dist文件只有放在服务器上才能查看，但本地如何查看呢，参考以下配置

1. 修改config文件夹中的index.js文件,将build对象中的打包路径，'/‘改为'./'，由绝对路径改为相对路径,建议将sourceMap改为false,编译的时候会快一点

   build: { assetsPublicPath: './', productionSourceMap: false, },

2. 修改完之后，重新 npm run build ，得到新的dist文件夹

3. 然后进入dist文件夹

   cd dist

4. 全局安装简易node服务器

   npm install http-server -g

5. 启动简易node服务器

   http-server

6. 出现如下图所示，就代表你的服务器启动成功了，那你也能在5000端口查看编译打包后的项目了，可以在ie浏览器中直接测试了

babel配置深入理解:https://blog.csdn.net/qq_40171039/article/details/78326344