vue3项目与旧版浏览器兼容问题

项目场景：

vue3项目与旧版本谷歌浏览器兼容问题

---

问题描述

使用浏览器访问的项目时无法正确运行项目
浏览器：谷歌75.0.3770.90
项目：vue3项目
问题：用浏览器访问的项目的时候一直报错We’re sorry but analysisdata doesn’t work properly without JavaScript enabled. Please enable it to continue.和Uncaught Syntaxerror: Unexpected token.
原因：猜测是因为项目使用的vue3框架和引用的架包所使用的语言，这个浏览器不支持，导致无法正确解析代码。

解决方案：

在Vue 3项目中使用Babel和Polyfill等工具来确保在旧版浏览器上的兼容性：

1、需要安装Babel及其相关插件和Polyfill库：npm install --save-dev @babel/core @babel/preset-env core-js。

2、在你的项目根目录下创建一个名为.babelrc的文件，并添加下面的配置：

{
						"presets": [  
							[  
							"@babel/preset-env",  
							{  
								"targets": {  
								"browsers": ["last 2 versions", "ie >= 11"] // 这里设置你支持的浏览器范围  
								},  
								"useBuiltIns": "entry", // 使用core-js的入口点  
								"corejs": 3 // 这里指定core-js的版本，需要与安装的版本匹配  
							}  
							]  
						]  
					}
					

3、使用Webpack作为构建工具，你需要在Webpack配置文件中添加Babel loader来处理你的JavaScript文件：（这一步可以省略，暂时没发现会引发bug）

vue.config.js:
module.exports = {  
						chainWebpack: config => {  
							const oneBabelLoader = config.module.rule('babel').use.loader('babel-loader');  
							oneBabelLoader.options  
							.merge({  
								presets: ['@babel/preset-env'] // 这里可以添加或覆盖预设  
							});  
						}  
					};

4、引入Polyfill：

import 'core-js/stable';  
import 'regenerator-runtime/runtime'; // 如果你使用了异步函数或其他需要此runtime的功能
//这里注意，在main.js中引入的时候需要把这两段代码放到第一行，否则可能会导致无效。

5、使用最新语法：在你的Vue 3代码中，你可以放心地使用ES6+的语法，因为Babel会将其转译为旧版浏览器能够理解的ES5代码。

6、请注意，随着Vue CLI、Babel和core-js的更新，某些配置和步骤可能会有所变化。始终参考最新的官方文档来获取最新的配置信息和最佳实践。

7、有发生不对的地方欢迎指出讨论。