安装多个低版本谷歌Chrome浏览器用于测试，适配Vue3+vite项目

安装多个低版本谷歌Chrome浏览器用于测试，适配Vue3+vite项目

问题：使用vue3+ts+vite搭建了一个项目，在chrome新版本浏览器上无问题，但是部署到现场页面直接空白，且控制台报错：

Uncaugnt SyntaxError: Unexpected token .
Uncaught SyntaxError: Unexpected token ?

原因：经过排查是现场谷歌浏览器72版本太老，不支持最新语法和es6这些语法导致，故需要做浏览器兼容性处理

安装多个低版本谷歌Chrome浏览器用于测试

• 通过这个网址chrome64位windows稳定版可以下载到相应版本的chrome浏览器，记住，必须时离线安装包，不能是在线安装包。
• 解压安装包，

1. 先在其它盘中创建一个Chrome70空文件夹，然后在该文件夹中创建一个APP空文件夹
   

2. 使用解压工具解压安装包，得到一个Chrome-bin文件夹：
   

3. 将Chrome-bin文件夹放到APP文件夹中
   

4. 在Chrome-bin文件中新建一个空文件夹user-data(名字随意)
   

5. 将APP里面的Chrome-bin里的chrome.exe发送到桌面快捷方式

6. 在桌面快捷方式修改
   原来是：

C:\Users\13487\Desktop\Chrome70\APP\Chrome-bin\chrome.exe

修改后：

C:\Users\13487\Desktop\Chrome70\APP\Chrome-bin\chrome.exe
–user-data-dir=“C:\Users\13487\Desktop\Chrome70\APP\Chrome-bin\user-data”

安装完成！

Vue3+vite兼容老版本浏览器处理

1. 安装@vitejs/plugin-legacy插件，用于转换语法

npm i @vitejs/plugin-legacy

2. 修改vite.config.js

在vite.config.js引入：

import legacy from "@vitejs/plugin-legacy"

在vite.config.js的plugins数组插件里使用legacy()

legacy()

3. 打包和调试

注意： 即使安装了@vitejs/plugin-legacy，你本地启动项目，在70版本浏览器了运行还是会报白屏看不了，因为该插件只是在打包时候生效。但是打包部署后，去70版本浏览器打开项目看，就能正常访问。

步骤：用打包工具打包成dist包后，进入dist目录，用http-server启动，就可以在70版本浏览器查看效果了