成功最有效的方法就是向有经验的人学习!

基于HBuilderX开发的前端项目无法使用cli构建发布

这个问题困扰了很长一段时间,也查过官方文档,发现打包方法和命令没有任何问题,后来也就不了了之了。
今天又遇到这样的项目了,我又把官方文档拿出来撸了一遍。按照官方的方法创建了一个示例项目发现可以正常构建,于是把项目结构和原码与开发提交进行对比,发现些许不同。

经这和开发和沟通测试发现,使用ide创建的项目只能在ide中构建,在cli中创建的项目才可以在我们的些自动化平台中构建。
问题就是这样就完美解决,于是开发组将之前的项目基于这个示例进行重新移植,全部可用。
这里分享一下创建方法
环境安装
全局安装vue-cli

npm install -g @vue/cli

创建uni-app
使用正式版(对应HBuilderX最新正式版)

vue create -p dcloudio/uni-preset-vue my-project

此时,会提示选择项目模板,初次体验建议选择 hello uni-app 项目模板,如下所示:

file

模板项目存放于 Github,由于国内网络环境问题,可能下载失败。针对此问题可以尝试如下措施:

更换网络重试,比如使用 4g 网络
在设备或路由器的网络设置中增加 DNS(如:8.8.8.8
在设备中增加固定的 hosts(如:140.82.113.4 github.com

运行和发布

npm run dev:%PLATFORM%
npm run build:%PLATFORM%

%PLATFORM% 可取值如下:

file

其他:

目前使用npm run build:app-plus会在/dist/build/app-plus下生成app打包资源。如需制作wgt包,将app-plus中的文件压缩成zip(注意:不要包含app-plus目录),再重命名为${appid}.wgt, appid为manifest.json文件中的appid
dev 模式编译出的各平台代码存放于根目录下的 /dist/dev/目录,打开各平台开发工具选择对应平台目录即可进行预览(h5 平台不会在此目录,存在于缓存中);
build 模式编译出的各平台代码存放于根目录下的 /dist/build/ 目录,发布时选择此目录进行发布;
devbuild 模式的区别:
dev 模式有 SourceMap 可以方便的进行断点调试;
build 模式会将代码进行压缩,体积更小更适合发布为正式版应用;
进行 环境判断 时,dev 模式 process.env.NODE_ENV 的值为 developmentbuild 模式 process.env.NODE_ENV 的值为 production

官方参考文档

https://uniapp.dcloud.io/quickstart-cli?id=%e7%8e%af%e5%a2%83%e5%ae%89%e8%a3%85
赞(0) 打赏
未经允许不得转载:陈桂林博客 » 基于HBuilderX开发的前端项目无法使用cli构建发布
分享到

大佬们的评论 抢沙发

全新“一站式”建站,高质量、高售后的一条龙服务

微信 抖音 支付宝 百度 头条 快手全平台打通信息流

橙子建站.极速智能建站8折购买虚拟主机

觉得文章有用就打赏一下文章作者

非常感谢你的打赏,我们将继续给力更多优质内容,让我们一起创建更加美好的网络世界!

支付宝扫一扫打赏

微信扫一扫打赏

登录

找回密码

注册