HbuilderX 现有uniapp项目迁移到vscode中(HbuilderX工程改vuecli工程)

原创已于 2024-02-02 20:23:37 修改 · 3.5k 阅读

37 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #vscode #前端 #vue.js #微信小程序

于 2024-02-02 16:16:13 首次发布

本文描述了如何将使用HbuilderX的uniapp项目迁移到VSCode进行开发，包括安装vue-cli脚手架、创建项目、迁移文件、调整依赖、测试运行和安装相关插件等步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HbuilderX 现有uniapp项目迁移到vscode中

前言
解决方法

前言

我想对苍穹外卖的前端小程序源码进行二次开发，发现他们提供的源码是编译后的，随后找到了开发版本，用的是uniapp。在HbuilderX中运行正常，准备迁移到vscode开发时运行命令：npm run dev:%PLATFORM%出现：“uni‘ 不是内部或外部命令，也不是可运行的程序”的报错。排查缺少package.json文件，以下是解决方法

解决方法

本方法主要参考uniapp 官方教程，将HbuilderX工程改为vue-cli工程

1、安装cli 脚手架

npm install -g @vue/cli

2、创建vue-cli uniapp项目

vue create -p dcloudio/uni-preset-vue 项目名

上面的命令可能会报错，需要将项目下载到本地，下面是项目地址
https://github.com/dcloudio/uni-preset-vue
下载后把dcloudio/uni-preset-vue 替换为下载的路径

‪vue create -p 路径 项目名

选择模板，选择默认模板
在这里插入图片描述

3、迁移文件

将生成的vuecli项目中的src目录文件(uni.promisify.adaptor.js除外)删除，再将HbuilderX 项目的文件（ node_modules、unpackage目录除外）复制到src路径中
在这里插入图片描述
对比修改两个项目的package.json文件，将HbuilderX项目的配置复制到vuecli项目中。

4、安装依赖

因为HBuilderX 工程自带插件帮我们安装了less-loader或者sass-loader，所以迁移到vue-cli工程项目的时候，我们需要再安装一次。在package.json文件中的devDependencies属性下加入，例：

"devDependencies": {
        ...
        "sass": "^1.42.1",
        "sass-loader": "10.1.1"
        ...
    }

运行命令

npm install

目前项目结构如下：
在这里插入图片描述

5、测试运行项目

输入命令：

npm run dev:mp-weixin

在这里插入图片描述
这里显示成功了
使用vscode 需要手动导入小程序项目，打开，微信开发者工具, 导入编译后的路径 dist\dev\mp-weixin 运行。

6、优化

运行编译命令可以使用npm脚本一键运行
在这里插入图片描述
若侧边栏没有npm请打开设置搜索npm，把自动检测npm脚本打开即可

然后我们可以把，常用的命令放在脚本靠前的位置，这样不用往下翻了

7、安装uniaap相关扩展插件

uni-helper
uniapp小程序扩展
uni-create-view

如果解决了，不妨点个赞吧！