技术: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'],}),],}