HbuliderX搭建项目结构:
CLI搭建项目结构:
CLI方式搭建uniapp项目:
vue create -p dcloudio/uni-preset-vue my-test
大家可以看下两种方式搭建的项目文件夹目录有什么区别,上面的是HbuilderX模版搭建的小程序项目,下面的是cli搭建的项目,先把my-test项目中src下面的文件全部删除,然后我把小程序代码全部塞进了src文件夹下就可以。
package.json文件内容:
script中已经提前帮我们配置好了,你需要什么环境也可以自己再配,方便快捷,看着眼前一亮。没想到真正跑起来发现缺少了很多依赖包,按照提示,一个一个全部装一遍。在这期间,大家也许会遇到一个node-sass报错,就像这样:incompatible with ^4.0.0,这是因为node-sass兼容问题,解决方法:
npm uninstall node-sass
npm install node-sass@4.14.1
好了,下图是装完所有提示的依赖包后的package.json
这时在运行npm run serve,发现可以了,在浏览器打开,一片空白,纳尼?赶紧看下控制台,真凶出现:
这个东西我在网上也大面积搜了一下,国内的好像没什么人遇到过,国外的遇到了但是也没提出什么有效的解决办法。核心问题:Uncaught TypeError: _interopRequireDefault is not a function
。这玩意一看就是编译后的代码,点击打开看一下,是这样的:
_interopRequireDefault
这个function找不到了,于是看它的引入文件里面有没有,在node_models
里面找的时候发现了一个诡异现象,@babel_runtime
这个包自动装了两个版本,但是之前在package.json
中明明只写了一个版本,大家可以看前面的截图,@babel_runtime
的版本号是7.12.0。
先不管了,看看里面再说。顺藤摸瓜,我们需要找的是这个路径:
找到对应的js文件后,是这样的:
可以看到,最关键的default
,被放在了条件判断里面返回,也就是说,在这里肯定因为某个原因,在编译的时候,并没有返回default
,就导致了页面里引入的时候实际上就引入了underfined
。
好的好的,到这里,问题的源头找到了,但是怎么解决呢?你是不是想在这里强制给它返回一个default
?哈哈哈,最好不要这样,因为你这样的话是动了是你本地的依赖包的代码,即使在你的电脑这个问题解决了,以后别人看到打开这个代码,再跑起来还是会遇到一模一样的问题,需要想一个万全之策,彻底解决这个问题。
这时候,领导过来了,他提供了一个思路,换一个依赖包看看,不同依赖包之前会有些微小的差别,需要细心去找。我想起了之前看到的两个版本的@babel_runtime
包,赶紧沿着相同的路径去找下另外一个包,看看有没有default
,截图如下:文章来源:https://www.toymoban.com/news/detail-596556.html
的确和之前的版本不一样,但是我也看不懂,只能切换下版本试一下看看,于是将package.json中的@babel_runtime版本切换到7.14.8,删掉node_models,重新npm install、npm run serve,成功!!没有报错!搞定!!
在成功运行的那一刻我还是很震惊的,当场就表示我要把这次改bug的经历写下来,发出来,因为这种事情有时候真的是没有思路,完全不知道该从哪里着手,而且这次小程序原地改版h5是以前没有尝试过的,中间过程切换了构建模式,又解决了巨多的依赖报错,还设置了各种自动化打包配置,在成功之前的每一步都是很绝望的在改,不知道后面还有多少bug在等着,这里也要特别感谢领导的关键支持,十分精准。
好啦,目前就这么多,h5现在已经完全自动化部署了,小程序也支持运行,一套代码,两端运行,搞定!文章来源地址https://www.toymoban.com/news/detail-596556.html
到了这里,关于uniapp使用cli脚手架创建兼容小程序和h5的项目 自动化命令打包运行的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!