vue3+vite适配低版本谷歌浏览器;vue3浏览器兼容性处理 |
您所在的位置:网站首页 › edge旧版本手机 › vue3+vite适配低版本谷歌浏览器;vue3浏览器兼容性处理 |
文章目录
前言在mac运行不同版本的chrome浏览器 用于测试一、安装依赖插件二、使用步骤1.修改vite.config.js,2.打包和调试3.查看本地dist服务打开的页面效果,常见问题:
三、72版本浏览器查看新打包文件的服务页面无误后,再去部署测试环境和现场
前言
最近使用vue3+ts+vite搭建了一个项目,在chrome112等新版本浏览器上无问题,但是部署到现场页面直接空白,且控制台报错: Uncaugnt SyntaxError: Unexpected token . Uncaught SyntaxError: Unexpected token ? 问题:经过排查是现场谷歌浏览器72版本太老,不支持最新语法和es6这些语法导致 故需要做浏览器兼容性处理 在mac运行不同版本的chrome浏览器 用于测试多说一句,老版本浏览器卡的一逼 一、安装依赖插件安装@vitejs/plugin-legacy插件,用于转换语法,vite升级到5.0.0 npm i @vitejs/[email protected] -D npm i [email protected]同时需要安装terser,否则打包不了(如果你能打包,不安装该依赖也可以) npm add -D terser1.在vite.config.js引入: import legacy from "@vitejs/plugin-legacy"2.在vite.config.js的plugins数组插件里使用legacy() legacy()2.1注意: 即使安装了@vitejs/plugin-legacy,你本地启动项目,在72版本浏览器了运行还是会报白屏看不了,因为该插件只是在打包时候生效。 但是打包部署后,去72版本浏览器打开项目看,就能正常访问 2.2本地起服务看效果: 将你打包后的dist文件,直接拖到一个新的vscode里,然后点击go live本地起一个服务,它会自动在浏览器里打开你打包后的项目,同样可以调用接口登录查看页面效果(可以先把接口服务那里写固定开发的ip+端口请求地址,否则可能会接口调用失败); 只不过无法做到你修改代码,它实时变化(因为是打包文件的服务)。有好的方法请评论区分享下 2.3然后查看页面样式或者其他报错,去修改代码后,重新打包,重新go live,重新查看页面在重新修改,直至完成兼容性处理 使用dist打包文件本地起服务看页面效果 1.本地起的服务,接口报错:(将接口暂时写固定的环境地址接口,重新打包发布,重新起dist服务看) 注意后期打包发布现场线上时候接口地址要改回去 记得将之前临时改的代码回撤(例如:固定写死的接口地址) |
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |
CopyRight 2018-2019 实验室设备网 版权所有 win10的实时保护怎么永久关闭 |