VUE CLI-3 Project not working on IE-11

Question

I have created an project in vuejs using vue-cli3. It working fine on chrome browser but in IE-11 version blank screen is shown with the following error in console as mentioned in this link: https://drive.google.com/file/d/1QaNwK1ekI2BwFsFyjvgbSsvwHBCmlcAD/view?usp=drivesdk On clicking console error that I have pointed in above screenshot, it opens a screen as display in given link https://drive.google.com/file/d/1_QXVjcw3cmqeC70LfNyLcr__rnXVIZIh/view?usp=drivesdk with the error in mini-toastr package: Here is my babel.config.js file code:

module.exports = {
  presets: [
   ['@vue/app', {
      polyfills: [
        'es6.promise',
        'es6.symbol'
      ]
    }]
  ]
}

and .browserslistrc file code :

> 1%
last 2 versions
not ie <= 8

I am not getting where I am doing a mistake. Is anything I am missing? If anyone need some more info please let me know. Thanks!

Answer 1

I finally ended up with the solution of above issue. To run project on IE-11 version just follow the 2 steps:

1. Install babel-polyfill using command "npm install --save babel-polyfill".
2. Import babel-polyfill in your main.js or index.js file at the top of above all imported packages. For e.g Here is your main.js file.

Note: If you import babel-polyfill at the end it does't work.

import 'babel-polyfill'  
import Vue from 'vue'
import Vuetify from 'vuetify'

import router from './router'
// include script file
import './lib/DemoScript'

// include all css files
import './lib/DemoCss'

Vue.use(Vuetify)

new Vue({
    store,
    router,
    render: h => h(App),
    components: { App }
}).$mount('#app')

Answer 2

Another solution: use the power of vue-cli-3 to leverage browser support: https://cli.vuejs.org/guide/browser-compatibility.html#modern-mode

Just one option when building and you're done once you've chosen browserslist to support :-)

This should work well for building an app.