vue-cli4+ts+element如何实现兼容ie10以上浏览器

实现方法步骤:

1. 下载babel-polyfill以及es6-promise

cnpm install --save babel-polyfill es6-promise

2.在main.ts顶部进行引入

import 'babel-polyfill'

import promise from 'es6-promise'

promise.polyfill()

3.为防止vue-router在ie中不起作用添加一下代码

new Vue({

  router,

  store,

  // render: (h) => h(App),

  render: function (createElement) {

        if ('-ms-scroll-limit' in document.documentElement.style && '-ms-ime-align' in document.documentElement.style) {

          window.addEventListener('hashchange', () => {

            var currentPath = window.location.hash.slice(1)

            if (this.$route.path !== currentPath) {

              this.$router.push(currentPath)

            }

          }, false)

        }

        return createElement(App);

      }

}).$mount('#app');

4. 配置babel.config.js

module.exports = {

  presets: [    

    ['@vue/app', {

      useBuiltIns: 'entry'

    }]

  ],

}

5. 配置vue.config.js

// 如果你不知道自己的第三方依赖道理有多少,就像我这样全局都进行引入。这样更方便,但是缺点就是对于不需要转化的包也进行转化

transpileDependencies: [ process.env.NODE_ENV === "development" ? ["*"] : [] ],

configureWebpack: (config) => {

        config.entry.app = ["babel-polyfill", "./src/main.ts"];

}

6 . 重启项目:npm run serve。就可以实现

你可能感兴趣的:(vue-cli4+ts+element如何实现兼容ie10以上浏览器)