在vue2，cli5的情况下配置ie的兼容或者直接不兼容并且提示或者跳转

Shi_haoliu

已于 2024-09-12 10:48:08 修改

阅读量966

点赞数 7

文章标签： vue 前端 edge浏览器 es6 javascript

于 2024-02-28 13:59:33 首次发布

本文链接：https://blog.csdn.net/Shi_haoliu/article/details/136344605

版权

本文介绍了如何使用Babel将ES6代码转换为ES5以确保浏览器兼容性，包括配置Babelpreset、polyfills以及在Vue项目中处理IE浏览器的兼容问题，同时提到在入口文件中进行浏览器检测并提供相应提示的策略。

摘要由CSDN通过智能技术生成

解决方法1：使用babel把es6转为es5

遇到的问题就是有些样式可能不能正常显示，还有就是词云图里面有报错

1.依赖包

"dependencies": {
		"@babel/plugin-syntax-jsx": "^7.23.3",
		"@babel/polyfill": "^7.12.1",
		"es6-promise": "^4.2.8",
		"regenerator-runtime": "^0.14.1",
		
		"axios": "^1.6.7",
		"core-js": "^3.34.0",
		"echarts": "^5.4.3",
		"element-ui": "^2.15.14",
		"file-saver": "^2.0.5",
		"fs": "^0.0.1-security",
		"html-docx-js": "^0.3.1",
		"jquery": "^3.7.1",
		"less": "^4.2.0",
		"less-loader": "^11.1.3",
		"qrcodejs2": "^0.0.2",
		"vant": "^2.13.2",
		"vue": "^2.6.14",
		"vue-jsonp": "^2.0.0",
		"vue-router": "^3.5.1",
		"vuex": "^3.6.2",
		"xlsx": "^0.18.5"
	},
	"devDependencies": {
		"@babel/core": "^7.12.16",
		"@babel/eslint-parser": "^7.12.16",
		"@vue/cli-plugin-babel": "~5.0.0",
		"@vue/cli-plugin-eslint": "~5.0.0",
		"@vue/cli-service": "~5.0.0",
		"babel-loader": "^9.1.3",
		"babel-plugin-import": "^1.13.8",
		"compression-webpack-plugin": "^6.1.1",
		"eslint": "^7.32.0",
		"eslint-plugin-vue": "^8.0.3",
		"less": "^4.2.0",
		"less-loader": "^11.1.3",
		"swiper": "^3.4.2",
		"vue-awesome-swiper": "^3.1.3",
		"vue-template-compiler": "^2.6.14"
	},
	"browserslist": [
		"> 1%",
		"last 2 versions",
		"not ie <= 9",
		"not dead"
	]

2.babel.config.js

module.exports = {
	presets: [
		// '@vue/cli-plugin-babel/preset'
		[
			'@vue/app',
			{
				modules: false,
				targets: {
					browsers: ['ie >= 9'],
				},
				useBuiltIns: 'entry',
				polyfills: ['es6.promise', 'es6.symbol'],
			},
		],
	],
	plugins: ['lodash', 'jsx-v-model'],
	plugins: [
		//vant自动引入
		[
			'import',
			{
				libraryName: 'vant',
				libraryDirectory: 'es',
				style: true,
			},
			'vant',
		],
	],
};

3.入口js文件 - 在最上面增加

import promise from 'es6-promise';
import 'core-js/stable';
import 'regenerator-runtime/runtime';
promise.polyfill();

4.vue.config新增
transpileDependencies：默认情况下 babel-loader 忽略其中的所有文件 node_modules

	transpileDependencies: [
		'vue-echarts',
		'axios',
		'v-contextmenu',
		'vue-runtime-helpers',
	],

解决方法2：在入口文件中 main.js中判断是否是ie，然后给给提示

const isIE =
	/msie|trident/i.test(navigator.userAgent) &&
	!/opera/i.test(navigator.userAgent);
if (isIE) {
	ElementUI.MessageBox.confirm(
		'您的浏览器版本过低，建议使用新版本的浏览器如Chrome，Firefox，Edge等访问本网站。',
		'浏览器不兼容',
		{
			confirmButtonText: '继续使用',
			cancelButtonText: '下载其他浏览器',
			type: 'warning',
			showCancelButton: true,
			closeOnClickModal: false,
		}
	)
		.then(() => {
			// 用户选择继续使用，给出第二个提示
			ElementUI.MessageBox.alert(
				'您已确认继续使用旧版浏览器，但某些功能可能无法正常使用。',
				'警告',
				{
					confirmButtonText: '知道了',
				}
			).then(() => {
				// 加载应用
				throw new Error(
					'IE 浏览器不受支持，请使用新版本的浏览器访问。'
				);
				// new Vue({
				// 	render: (h) => h(App),
				// 	router,
				// 	store,
				// }).$mount('#app');
			});
		})
		.catch(() => {
			// 用户选择返回首页
			window.location.href = 'http://www.baidu.com/';
		});

给提示的第二种方法，直接写在入口文件中，建议也在main。js文件里面加上判断，要不然加载vue的接口会报错

<!DOCTYPE html>
<html lang="">

<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 %>favicon.ico">

  <!-- 配置此项会导致开发环境 webpack的热更新失效 所以改成配置文件配置 -->
  <meta http-equiv="Content-Security-Policy" content="<%= process.env.VUE_APP_CSP_META || '' %>" />
  </script>

  <title>
    <%= htmlWebpackPlugin.options.title %>
  </title>
  <style>
    .ie-warning {
      background-color: #f9f9f9;
      padding: 20px;
      margin: 20px;
      border-radius: 5px;
    }
  </style>
</head>

<body>
  <noscript>
    <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
        Please enable it to continue.</strong>
  </noscript>
  <div id="appDatas"></div>
  <!-- <div id="app">
  </div> -->
  <script src="/js/jquery-1.4.4.min.js"></script>
  <!-- built files will be auto injected -->

  <script>
    // 检查浏览器是否为IE
    var isIE = /msie|trident/i.test(navigator.userAgent) && !/opera/i.test(navigator.userAgent);

    // 创建警告信息的HTML内容
    var warningContent = '<div class="ie-warning"><h2 style="padding-bottom: 30px">您的浏览器版本过低</h2><p>建议使用新版本的浏览器如Chrome，Firefox，Edge等访问本网站。</p></div>';

    // 如果是IE浏览器，则在页面中插入警告信息
    if (isIE) {
      document.getElementById('appDatas').innerHTML = warningContent;
      // 如果需要执行额外逻辑，可以在这里添加
    } else {
      document.getElementById('appDatas').innerHTML = '<div id="app"></div>'
      // 如果不是IE浏览器，可以在此处插入其他HTML内容或者加载Vue Router视图
    }
  </script>
</body>

</html>