CODEWITHSUNDEEP
vue.jsinternet-explorervue-componentinternet-explorer-11
Dapk
Dapk

Reputation: 213

Vue App Blank page in IE-11 and Ms Edge 40

I was given a Vue app that is working perfectly in Chrome, Firefox. But blank page in IE-11 and Ms Edge. No Erorrs in console. I'm not a Vue developer but I'm interested in Vue. So Tried to find a solution googling it. But no of those solutions works for me. Can someone please tell me what should I do to fix this blank page issue in IE-11 & Edge?.

main.js

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

import Request from './http/request'

const EXCLUDED_PROD = [
    '52.59.217.237',
    'localhost'
]

babel.config.js

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

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>fav.png">
    <title>Starline Security</title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but Starline Security doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
     <!--built files will be auto injected-->
  </body>
</html>

package.json

  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]

Upvotes: 0

Views: 638

Answers (1)

Yu Zhou
Yu Zhou

Reputation: 12961

How do you create your vue project? I create vue project according to this link and choose default. It can run well in IE and Edge without installing other packages.

I compared the files in the working project with yours and the babel.config.js and package.json are different. You could try to edit your babel.config.js and package.json according to below.

babel.config.js:

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ]
}

package.json:

{
  "name": "hello-world",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^2.6.11"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^4.4.0",
    "@vue/cli-plugin-eslint": "^4.4.0",
    "@vue/cli-service": "^4.4.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "vue-template-compiler": "^2.6.11"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

Besides, it seems that your main.js is not complete. Mine is like this:

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

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

Upvotes: 1

Related Questions