vue-cli兼容ie9的兼容问题

当vue遇见ie9的时候，部署到服务器之后，打开居然是一片空白，vue是支持ie9的，这个时候就需要来一波兼容了
参考尤大的解答 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 加入以下代码（非必须）

4. 在config中的webpack.base.conf.js中,修改编译配置

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

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

npm install es6-promise --save

完成以上配置，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浏览器中直接测试了

   
   
   image.png

另外：

只在兼容ie9环境运行css或js

if (window.navigator.userAgent.indexOf('MSIE 8.0') >= 1) {
 //如果浏览器为IE8
 alert('您的浏览器版本不支持此页面，您该更新浏览器了')
}

if (window.navigator.userAgent.indexOf('MSIE 9.0') >= 1) {
 //如果浏览器为IE9
 alert('您的浏览器版本不支持此页面，您该更新浏览器了')
}

vue中 elementUI 的 ie9 兼容问题

1. 可能的原因1，element-ui 中使用了 display: flex; 样式，IE9不支持次样式，解决方法为，排查下各组件，避免使用带 display: flex; 的组件(ie10以上没问题)
2. 可能的原因2，IE9浏览器过于老旧，单文件最大行数超过一定限制将不再读取后边的内容，因此可以尝试分割css文件和打包的js文件
   2.1. 分割js文件，最好的方法是采用vue的路由懒加载，这样打包时，vue-loader会把每个路由对应的js文件打包在一起。同时注意组件的合理划分，避免单组件体积过大，并提高组件的复用性
   2.2. 分割css文件，通过yarn add css-split-webpack-plugin -D安装css-split-webpack-plugin包来分割组件，修改webpack.prod.conf.js文件

 // 引入依赖
  var CSSSplitWebpackPlugin = require('css-split-webpack-plugin').default
 
  // 在css打包插件后面新增css分割插件
  new ExtractTextPlugin({
    filename: utils.assetsPath('css/[name].[contenthash].css')
  }),
  // 新增的css分割插件
  new CSSSplitWebpackPlugin({
    size: 4000,
    filename: utils.assetsPath('css/[name]-[part].[ext]')
  }),