最近在把用vue2 + webpack写的h5老项目,重构成uniapp + vue3 让他兼容多端,这期间遇到的问题简直不要太多,学不完,根本学不完
使用vue3+vite+vant重构期间遇到的问题
起因
由于老项目是用cli直接创建的vue项目,他的这种方式能够打包成纯h5项目,还能打包成app,
于是我就想着直接创建一个vue3+vite+vant的项目,这种重构就比较方便,而且vant的组件也挺好使的
但是! 当我把项目建立成功之后,想简单尝试下打包成app之后能否正常显示,好的问题来了,同样的打包方法vue2+webpack打包成app之后能够正常显示,但是我新建的项目打包成app安装之后页面是一片白,我以为是我某些配置不行的原因
然后我就去码云和github上找了一个完整的vue3+vite+vant项目,发现他们的项目打包成app问题依然存在,在我找的那么多项目中,我记得只有一个是能显示页面的也是webpack项目,但是请求不到数据,这个项目的链接放这里了
下面就是白屏问题和请求不到数据的解决方法:
白屏问题
白屏的问题也找了很多文章,大多数文章都是修改webpack配置中的assetsPublicPath: '/'或者publicPath: './',设置静态资源路径,
然后我就是找了vite怎么设置静态资源问题,成功解决白屏问题,下面是vite设置静态静态资源路径的方式:
在vite.config.js文件中:
export default defineConfig({
base: './',
})
请求不到数据
打包成app安装到手机上之后请求不到数据, 这个是因为我们平常写代码调试的时候,需要将其运行到浏览器进行适配,但是浏览器会有跨域,所以会选择使用代理来解决跨域, 但是app没有跨域,不用使用代理
所以,项目打包成app前需要将代理代码注释, axios中设置baseUrl的时候,直接设置为我们要请求的地址就可以了
将vue写的h5项目打包成app
- 这个需要借助HbuilderX,新建一个5+APP的项目
- 建立成功之后, 我们保留unpackage文件夹(这个文件中使用在存放apk文件的)和manifest.json文件(app的配置),可以将其他目录都删除
- 把
白屏问题和请求不到数据的问题解决之后,打包vue项目, dist目录里面的所有文件全部都复制到我们用HbuilderX建立的5+app项目中, 和manifest.json在用一个目录下
HbuilderX建立的5+app项目最终的目录结构如下(每个项目的配置不一样,打包之后的目录结构也不一样,只要将dist里面的所有文件都CV过来就行):
- 在HbuilderX中将其打包成app,这个很简单,在HbuilderX点
发行 -> 原生app(云打包) -> 打包 -> 继续,然后等待就可以了
不过有一点要注意: 如果你的manifest.json中选择了通讯录,HbuilderX就会让进行实名认证等一系列的麻烦操作,所以如果是你自己测试,或者不需要通讯录,不要选! 因为真的很麻烦!!!
uniapp + vue3重构项目遇到的问题
为什么前面我都已经写过vue3 + vite + vant重构了,为啥还要用uniapp + vue3来重构
因为再写这篇文章前,我的白屏问题一直没有解决,然后我用HbuilderX新建了uni-app + vue3项目
uniapp我可有太多问题了…太久不用很多东西都不记得了,一整个新手入村,我真是栓Q
echarts问题
先看图,左边是我重构的,右边是老项目,当我重构完还没来得及高兴,就遇到了一个新的问题,谁懂啊…
既然使用了uniapp + vue3,他的优势就是一套代码多端使用,所以当我完成首页重构之后,我尝试将其运行到小程序,不出意外就是报错了…
第一个报错: Cannot read property 'querySelector' of undefined
原因: 小程序中不能或者说没有 querySelector
在小程序中想要获取到dom元素,使用的是uni.createSelectorQuery(),uniapp关于这个API 的链接在这里,然后我使用 uni.createSelectorQuery().select(选择器)来获取dom元素,第二个报错来了…
第二个报错: this.dom.getContext is not a function
原因: 在初始化echarts的时候，echarts.js规定只能使用dom原生方法获取标签，即document.querySelector(选择器)
这两个报错,也就说冲突了… 一个只能使用,一个压根没有…再次来到uniapp官网…寻找解决方案
划线部分让我们仔细阅读:
解决方案就是使用(uCharts)[https://www.ucharts.cn/v2/#/guide/index], 之前都白干了, 人生就是白干加白干…
下班了… 回头等我解决了,再接着写…