1500字范文,内容丰富有趣,写作好帮手!
1500字范文 > vite项目低版本浏览器兼容性问题

vite项目低版本浏览器兼容性问题

时间:2019-01-02 11:18:37

相关推荐

vite项目低版本浏览器兼容性问题

技术:vite+vue3.2+ts+vant

1、这个是还没打包的实现:

先说下问题:

app内置的浏览器内核版本太低,导致用app内置浏览器打开,会出现白屏,引入vconsole调试了一下,发现一个问题,提示有个错误的符号 ‘.’,最终把问题锁定在了一个执行语句:

XXX?.xxx

该语句是ES6的新语法,一般浏览器都没有问题,但低版本的浏览器无法解析该语句,所以要进行js转换,一般的vue2项目我们会使用babel,但vite里不好使用babel,需引入另一个插件,esbuild,他可以把指定文件转译成目标文件,如ts->js,话不多说,贴代码。

目标文件是vite.config.ts,首先要引入该文件

import esbuild from 'rollup-plugin-esbuild'

然后在defineConfig对象内使用插件属性

//其中vue()是vite脚手架帮我们自动生成的,我们只需要添加一个属性就可以了

plugins: [vue(),{...,esbuild({//替换成你想要的谷歌内核版本target: 'chrome64',loaders: {'.vue': 'js','.ts': 'js'}})}],

2、这个是打包后实现

目标文件是vite.config.ts,首先要引入该文件

安装npm install @vitejs/plugin-legacy -Dnpm add -D terser //这个一定得安装,不然打包会报错

// vite.config.jsimport legacy from '@vitejs/plugin-legacy'export default {plugins: [vue(),legacy({targets: ['defaults', 'not IE 11'],}),],}

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。