vue系列之----项目在ie浏览器中空白

编程入门行业动态更新时间:2024-10-10 14:28:19

具体现象

使用vue-cli脚手架搭建的项目，【npm run dev】运行，在chrome下正常显示，ie下显示空白。

问题原因

IE9-IE11 不兼容ES6语法，promise语法

问题解决

1. 下载安装包babel-polyfill、es6-promise

npm i @babel/polyfill'
npm i es6-promise

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

import '@babel/polyfill'
import Es6Promise from 'es6-promise'
require('es6-promise').polyfill()
Es6Promise.polyfill()

3.修改配置

vue2.0: 修改webpack.base.conf.js

 entry: {
        app: ["babel-polyfill", "./src/main.js"]
    },

vue3.0:修改vue.config.js文件

module.exports = {
	configureWebpack:{
	// 其他配置
	},
    chainWebpack: config => {
    // 其他配置
    config.entry('main').add('babel-polyfill') // main是入口js文件
    // 其他配置
   }
}

4.在index.html文件head标签中添加兼容

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

配置完成依旧空白问题排查

若此时依旧空白，则可能是个别文件未转换到
这里通过add方法，配置babel需要另外转换的文件

// vue2.0 webpack.base.conf.js 
 {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [
          resolve('src'),
          resolve('test'),
          resolve('static') // 额外配置文件
          resolve('node_modules/webpack-dev-server/client'),
          resolve('node_modules/v-charts/src'),
          resolve('node_modules/vue-awesome'),
          resolve('node_modules/element-ui/packages'),
          resolve('node_modules/element-ui/src')
        ]
}

// vue3.0  根目录下新建 .babelrc 文件
{
  "presets": ["@babel/preset-env"],
  "plugins": [
    "@babel/plugin-transform-runtime"
  ]
}

//  vue3.0   修改 babel.config.js
module.exports = {
	presets: [
		[
			'@vue/app',
			{
				useBuiltIns: 'entry',
				polyfills: [
					'es6.promise',
					'es6.symbol'
				]
			}
		]
	]
}

// vue3.0   修改vue.config.js
const path = require('path');

function resolve(dir) {
  return path.join(__dirname, '.', dir);
}

module.exports = {
  ...  // 其他配置
  // 默认情况下 babel-loader 会忽略所有 node_modules 中的文件。
  // 如果你想要通过 Babel 显式转译一个依赖，可以在这个选项中列出来
  transpileDependencies: ['node_modules/webpack-dev-server/client'],
  chainWebpack: config => {
    config.entry('main').add('babel-polyfill'), // main是入口js文件
    config.module.rule('compile')
      .test(/\.js$/)
      .include
      .add(resolve('src'))
      .add(resolve('test'))
      .add(resolve('static')) // 额外配置文件
      .add(resolve('node_modules/webpack-dev-server/client'))
      .add(resolve('node_modules'))
      .end()
      .use('babel')
      .loader('babel-loader')
      .options({
        presets: [
          ['@babel/preset-env', {
            modules: false
          }]
        ]
      });
  }
}