vue2空脚手架在IE浏览器中白屏

vue2空脚手架在IE浏览器中白屏,ie10和ie11报错一样

vue2 + vue/cli5 空脚手架

img

img

img

试了网上很多方法都没有解决,求方案

也许你的问题应该换成,如何在 Vue 2.x 项目中兼容 IE 浏览器?解决问题需要知道你的vue脚手架版本,以便于配置babel编译es6等不兼容IE的语法。如果你的项目不是必须要使用IE浏览器,建议放弃IE,实际工作中,大部分VUE项目还是不需要兼容IE的

可能是由于IE浏览器不支持ES6语法和一些新的API,需要进行兼容处理
1.在babel.config.js文件中添加IE的兼容配置

module.exports = {
  presets: [
    ['@vue/app', {
      useBuiltIns: 'entry',
      polyfills: {
        'ie': '11.0.0'
      }
    }]
  ]
}


2.在main.js文件中引入babel-polyfill

import 'babel-polyfill';
import Vue from 'vue';
import App from './App.vue';

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


3.在index.html文件中添加IE的兼容性meta标签

<!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">
  <title>Vue App</title>
</head>
<body>
  <div id="app"></div>
  <script src="/dist/js/app.js"></script>
</body>
</html>

以上是一些可能的解决方法,根据具体情况进行尝试。同时,建议在开发过程中使用现代浏览器,避免出现兼容性问题