vue3.0 + vite2.0+如何兼容低版本浏览器

这里写自定义目录标题

一、问题
二、解决
三、解决方案
四、打包预览

一、问题

在使用vue3.2和vite2 开发一个移动端或者钉钉端 H5 微服务
ios app内置浏览器打开没问题
安卓 app 内置浏览器打开空白页面 vconsole 打印出现报错global this undefind

二、解决

内置浏览器版本比较低打印出来是 63
vue3 代码不兼容低版本浏览器

三、解决方案

步骤一： vite.config.ts里 build.target 配置项指定构建目标为 es2015或者
步骤二：安装@vitejs/plugin-legacy 安装完报错也还在指定版本可以解决
“@vitejs/plugin-legacy”: “1.8.0”,
步骤三：配置 vite.config.ts

import legacy from '@vitejs/plugin-legacy';legacy({targets: ['Chrome 63'],additionalLegacyPolyfills: ['regenerator-runtime/runtime'],modernPolyfills: true,}),

四、打包预览

完成以上操作打包安装本地服务器
npm install -g express-generator
初始化文件夹
express -e server
文件夹中运行
npm i 安装依赖
打包后的 dist 文件下所有文件
复制到新建文件夹下 public下
并运行 npm start
运行后 location: 3000 进行访问

vue3.0 + vite2.0+如何兼容低版本浏览器相关推荐

解决vue项目在ie浏览器中无法显示的问题，兼容低版本浏览器问题
解决vue项目在ie浏览器中无法显示的问题,兼容低版本浏览器问题 1.在csdn中找到了一下解决方案,但与本项目略有不同 vue项目兼容ie浏览器的问题:在其他浏览器显示都是正常的,在ie11下显示空 ...
【CSS】清除浮动 ③ ( 清除浮动 - 使用 after 伪元素 | 语法简介 | 兼容低版本浏览器 | 原理分析 )
文章目录一.清除浮动 - 使用 after 伪元素 ( 最流行写法 ) 1.额外标签法和 overflow 样式法弊端 2.after 伪元素清除浮动简介 3.after 伪元素清除浮动核心代码 ...
vue 检测ie版本_Vue2+Webpack+ES6 兼容低版本浏览器（IE9）解决方案
Vue2+Webpack+ES6 兼容低版本浏览器(IE9)解决方案解决方式:安装 "babel-polyfill" 即可. 命令:npm install --save-dev ...
React+Webpack+ES6 兼容低版本浏览器（IE9）解决方案
React+Webpack+ES6 兼容低版本浏览器(IE9)解决方案参考文章: (1)React+Webpack+ES6 兼容低版本浏览器(IE9)解决方案 (2)https://www.cnbl ...
element ui 兼容低版本浏览器
基于ES6的用Vue框架element ui写的页面,如果当需要解决兼容低版本浏览器时,会遇到在低版本浏览器中不显示效果,页面一片空白,但控制台也不报错,而在高版本可以正常显示的情况. 低版本效果: ...
React 项目兼容低版本浏览器
兼容低版本浏览器真的是让人头大,不过现在好在有框架鱼插件的运用,让我们轻松的兼容低版本浏览器,本文中以 DvaJS Cli 举例下载 react-app-polyfill 和 core-js 插件 ...
vue3+vite +element-plus+tailwindcss兼容低版本浏览器（uc）
部分问题 uc浏览器 rgb支持不全如rgb(0 0 0 /30%) 这种写法不支持 tailwindcss v3 部分样式在低版本下也不支持 uc浏览器对于 tailwindcss boxSha ...
vite如何兼容低版本浏览器
一.问题在使用vue3.2和vite2.0+开发一个移动端H5,测试时发现很多低版本的安卓手机浏览器出现白屏的现象,而ios机型基本上是好的,原因是很多低版本浏览器并不支持原生ESM导入的方式,下面 ...
使用umi打包项目兼容低版本浏览器如safari，chrome等
umi.js 中有运算符 Safari和低版本Chrome报错,参考 umijs.org 文档,配置正确的 targets 在umirc.js中配置targets 2.1.0+ 配置浏览器最低版本,会 ...