vue 解决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 加入以下代码(非必须)

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

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

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

当然,如果你只用到了 axiospromise进行兼容,可以只用 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浏览器中直接测试了

    这里写图片描述

Logo

前往低代码交流专区

更多推荐