安装多个低版本谷歌Chrome浏览器用于测试，适配Vue3+vite项目
安装多个低版本谷歌Chrome浏览器用于测试，适配Vue3+vite项目
问题：使用vue3+ts+vite搭建了一个项目，在chrome新版本浏览器上无问题，但是部署到现场页面直接空白，且控制台报错：
Uncaugnt SyntaxError: Unexpected token .
Uncaught SyntaxError: Unexpected token ?
原因：经过排查是现场谷歌浏览器72版本太老，不支持最新语法和es6这些语法导致，故需要做浏览器兼容性处理
安装多个低版本谷歌Chrome浏览器用于测试
- 通过这个网址chrome64位windows稳定版可以下载到相应版本的chrome浏览器，记住，必须时离线安装包，不能是在线安装包。
- 解压安装包，
-
先在其它盘中创建一个Chrome70空文件夹，然后在该文件夹中创建一个APP空文件夹
-
使用解压工具解压安装包，得到一个Chrome-bin文件夹：
-
将Chrome-bin文件夹放到APP文件夹中
-
在Chrome-bin文件中新建一个空文件夹user-data(名字随意)
-
将APP里面的Chrome-bin里的chrome.exe发送到桌面快捷方式
-
在桌面快捷方式修改
原来是：
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兼容老版本浏览器处理
- 安装@vitejs/plugin-legacy插件，用于转换语法
npm i @vitejs/plugin-legacy
- 修改vite.config.js
在vite.config.js引入：
import legacy from "@vitejs/plugin-legacy"
在vite.config.js的plugins数组插件里使用legacy()
legacy()
- 打包和调试
注意： 即使安装了@vitejs/plugin-legacy，你本地启动项目，在70版本浏览器了运行还是会报白屏看不了，因为该插件只是在打包时候生效。但是打包部署后，去70版本浏览器打开项目看，就能正常访问。
步骤：用打包工具打包成dist包后，进入dist目录，用http-server启动，就可以在70版本浏览器查看效果了