zoukankan      html  css  js  c++  java
  • vue项目兼容ie

    一、兼容ES6

    Vue 的核心框架 vuejs 本身,以及官方核心插件(VueRouter、Vuex等)均可以在 ie9 上正常使用。但ie不兼容es6,所以需要安装插件将“Promise”等高级语法转换成ie可以识别的es5。

      报错:ReferenceError: “Promise”未定义,页面空白
      报错:app.js文件报错页面空白,可能是缺少配置文件.babelrc

    一、 babel-polyfill
    npm install babel-polyfill --save
      在main.js中的最前面引入import 'babel-polyfill'(注:必须引入在最前面,保证所有es6语法都会被解析)
      下载完成后找到build文件夹下的webpack.base.conf.js下的一段代码

    module.exports = {
      entry: {
        app: './src/main.js'
      },

    替换为

    module.exports = {
    context: path.resolve(__dirname, '../'),
    entry: {
      app: ["babel-polyfill", "./src/main.js"],
    }

    二、如果引入 babel-polyfill还有一些高级语法没有被编译,配置 .babelrc文件,官网如下: https://www.babeljs.cn/ 根据项目选择引入什么插件,以及如何配置,详情查看官网。

    检查根目录下是否有.babelrc文件,如没有自行创建。
    .babelrc是Babel的配置文件,放在项目根目录下,使用Babel的第一步就是配置这个文件,该文件主要是对预设(presets)和插件(plugins)进行配置

    创建.babelrc文件的方法:
      1.新建一个文件
      2.右键-重新命名-输入.babelrc. (开头和结尾一共两个点)
      3.添加配置代码,

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

    配置代码解读:
    (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就好了。
      目前一般是使用stage2 (https://babeljs.io/docs/en/babel-preset-stage-2) 该特性规范己经被起草,将会被纳入标准里.

    配置完以上两项后,基本可以解决页面空白的问题。

    三、网上还有一些其他注意事项,比如安装了新的功能性插件e-chart,地图,或者static目录下有其他js文件(有es6语法) 等,IE 会报错。
    这是由于这些第三方插件的底层也有es6代码,没有被编译,个人实践后认为是由于没有将babel-polyfill引入在页面最顶部导致的。但如引入在顶部还报错,请参考以下解决方案:
    1.找到webpack.base.config.js
    2.

    {
      test: /.js$/,
      loader: 'babel-loader',
      include: [
      resolve('src'),
      resolve('test'),
      resolve('static'),
      resolve('node_modules/webpack-dev-server/client')
      resolve('node_modules/echarts')
      ]
    }


    二、兼容axios

      一、如果只需要兼容axios的话,可以只用 es6-promise ,不引用babel-polyfill,安装方法如下:

      npm install es6-promise --save
      import promise from 'es6-promise';
      promise.polyfill();


    二、IE浏览器缓存问题,导致axios接口不重新请求,页面内容不刷新
      解决方案: axios请求上加时间戳,使每次都是参数不同的新请求

      1、找到项目中对axios进行封装的文件
      2.找到post和get方法,修改里面的参数,以post请求为例,原参数为data: ...param,改为如下第7行所示

    //post请求
      post(url, param) {
        return new Promise((resolve, reject) => {
          axios({
        method: 'post',
        url,
        data: {
          t: Date.parse(new Date()),
          ...param
        },
        cancelToken: new CancelToken(c => {
          cancel = c
        })
        }).then(res => {
        resolve(res)
          }).catch((error) => {
        reject(error);
          })
        })
      }

    3.问题分析:
    这个页面不刷新的问题,一开始以为是v-router的缓存机制导致的,尝试在每次跳转路由时加时间戳,但并没有解决问题,最后才发现是axios的问题。
    由此反向推理,如果将axios加上时间戳,不能解决问题,请重新检查是否有v-router的,或者请求方式为history,等缓存机制的影响。

  • 相关阅读:
    js正则表达式中的问号使用技巧总结
    380. Insert Delete GetRandom O(1)
    34. Find First and Last Position of Element in Sorted Array
    162. Find Peak Element
    220. Contains Duplicate III
    269. Alien Dictionary
    18. 4Sum
    15. 3Sum
    224. Basic Calculator
    227. Basic Calculator II
  • 原文地址:https://www.cnblogs.com/songfengyang/p/12851813.html
Copyright © 2011-2022 走看看