HBuilderX uniapp项目转vue-cli项目完整步骤(已成功)

项目前情: 公司需要新做一个 H5 项目,为了快速开发,我直接用之前新做的 uniapp 小程序的项目框架,由于这个项目是 HBuilder 创建的,只能通过 HBuilderX 手动打包再传给运维同学 ,无法使用公司内部的运维平台走打包命令,这样太麻烦了,于是决定还是把项目改造成 vue-cli 创建的项目。

改造过程: 原本想直接在原有的项目上改造,尝试了一下发现这种方式不可行,因为两种方式构建的项目,不仅是项目目录结构的不同,它们的打包配置上也不同,HBuilderX 内置了打包所需的运行环境,vue-cli创建的项目打包配置在项目里,还有,使用的组件uview,对于两种方式创建项目的安装和配置也不同。

最后决定直接使用 uniappvue-cli 的方式快速创建一个项目,再 npm 方式安装和配置 uview 组件,最后将老项目的文件搬过来就可以了。事实证明我这样做是完全可行的。

具体步骤:

1.vue-cli 方式创建项目,选择 默认模板

bash 复制代码
vue create -p dcloudio/uni-preset-vue my-project

2. npm 方式安装和配置 uview 组件

3.接下来将这些主文件(跟业务相关的代码文件),非项目配置文件移动到新创建项目的 src 文件夹下

相同文件的代码可以直接复制过来,比如 pages.json 文件。

建议你每挪一部分文件,就观察下项目是否报错,防止报错集中在一起,影响进度,看到一大堆报错,心里也会饭,进而影响这种方式的可行性。

全部搬过来之后,重新启动项目跑一遍,功能没问题的话,之前的 HBuilder 创建的项目就可以干掉了。

相关推荐
benbenAItalk3 小时前
数字人口播视频的批量生产实践:素材规范、任务编排与质量验收
java·前端·音视频
2601_962885723 小时前
如何用 Python 扫描 A 股跳空缺口并统计缺口回补概率?
java·前端·python
西瓜太郎12344 小时前
Claude Code、Codex CLI、Gemini CLI 能否共用一枚 Key?先看协议选择矩阵
前端·api 网关·claude code·gemini cli·codex cli
陈随易6 小时前
在Finch用了62亿词元,我认为这是新一代Agent工具之神
前端·人工智能·后端
水域安全老周6 小时前
水趣钓鱼救生衣专利拆解:两级锁紧如何解决落水人衣分离
java·前端·网络
计算机魔术师7 小时前
Anthropic CEO突然喊踩刹车,OpenAI罕见力挺:AI这辆车不能只踩油门了
前端
wing987 小时前
从codex转战workbuddy使用一周的感受
前端·人工智能·后端
EatFan7 小时前
Java接入支付宝 JSAPI 支付保姆教程(二):流程讲解与前后端代码讲解
前端·spring boot·后端·微信小程序·小程序·uni-app
梦想平凡7 小时前
百游棋牌源代码开发搭建教程(五):房间创建、座位分配与请求幂等实现
前端·javascript·数据库·源代码管理
IT_陈寒8 小时前
Redis的Set操作居然能把我的服务整挂了?
前端·人工智能·后端