vue转uniapp问题记录

1,621 阅读2分钟

整体思路

将Vue代码转成uniapp代码,再通过uniapp打包成H5渠道、微信小程序的代码。 只需要将template和css转换,js可以完全复用vue的,uniapp支持vue的写法

问题汇总:

1、路径问题

Vue代码中在webpack的打包中为文件都设置了别名,引用文件时通过别名引用,在uniapp的page.json文件中可设置easycom的custom配置项

2、v-else不能完全解析的问题

v-else 和v-if的两段代码块不在同一个容器里时,会出现v-else代码块未被解析 ast树中的属性树缺少后一个模块

3、注释问题:template中根容器外面如果有注释  <!--<div> </div> -->  AST树解析异常

即使是注释也要放到容器里面,不能直接放到template里面,需要一个外层容器包裹

4、组件动态渲染问题:写一个vue公共文件,在里面使用v-if、v-else-if、v-else判断每一次使用哪一个子组件

5、全局变量问题:之前项目中的全局变量,在uniapp中可设置在globalData里

6、css转义问题:

(1)vue的style标签中css使用了rem,需要转换成rpx

 (2) vue的style标签中引用的less文件里 又引用了其他less文件-----

Style标签中引入less文件uniapp能直接支持,但需要下载less编译插件,针对less写法的,可以转成 正常的css写法,配置的时候 注意要下载less依赖包(npm install   <less@2.7.1> --save-dev)

7、uniapp打包成微信小程序后,

(1)接口调用问题:使用真机接口请求不到,但是打开调试模式,就能正常请求到

解决方案: 登陆微信后台,配置后台的合法域名

(2)打包上传问题:如果不分包,控制在2M以内、控制图片大小

8、本地调试接口转发问题:

在manifest.Json中配置转发,以源码视图模式打开,添加上如下配置,将接口转发到mock平台,转发配置不了域名  目前只根据ip转发

转发配置完成后,需要重新点击“运行”,配置才会生效