# hbuilder项目转vue项目&&jenkins uniapp

#### 使用vue cli工具、uni预设创建新的项目

官方参考：<https://uniapp.dcloud.net.cn/quickstart-cli.html>

##### VUE3项目

如果不知道当前项目用的是什么VUE版本，可以去**manifest.json**查看**vueVersion**字段

```shell

# VUE3 javascript 项目
npx degit dcloudio/uni-preset-vue#vite my-vue3-project

# VUE3  typescript项目
npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project

```

##### VUE2项目

```shell

# 需要全局安装 vue-cli

npm install --location=global @vue/cli@4  --registry=http://registry.npmmirror.com

# 使用预设创建项目
vue create -p dcloudio/uni-preset-vue my-project

```

#### 根据项目类型选择预设模板（选择默认即可）

**使用Vue3/Vite版不会提示，目前只支持创建默认模板**

[![](https://iovhm.com/book/uploads/images/gallery/2025-05/scaled-1680-/h4ehck2ChSJsNtr3-image-1747764340088.png)](https://iovhm.com/book/uploads/images/gallery/2025-05/h4ehck2ChSJsNtr3-image-1747764340088.png)


#### 移植项目

```shell

# 先将项目运行起来
npm install  --registry=http://registry.npmmirror.com
npm run dev

# 删除新项目中的src目录内文件

# 复制老项目文件到src目录

# .git  package.json package-lock.json node_modules vue.config index.html 不需要复制
# .env 不需要要复制
# 
#
#
#
# 如果你的package.json有内容，需要手动合并到项目外层的package.json

# 再次运行
npm run dev

```

#### 空项目的时候的文件夹内容

[![](https://iovhm.com/book/uploads/images/gallery/2026-03/scaled-1680-/sMhaERk9crjdRpe4-image-1773992571164.png)](https://iovhm.com/book/uploads/images/gallery/2026-03/sMhaERk9crjdRpe4-image-1773992571164.png)


[![](https://iovhm.com/book/uploads/images/gallery/2026-03/scaled-1680-/gjKt0HWrJGUxryPz-image-1773998377934.png)](https://iovhm.com/book/uploads/images/gallery/2026-03/gjKt0HWrJGUxryPz-image-1773998377934.png)


#### 替换node-sass

如果运行时出现出现node-saas错误


```json

  "devDependencies": {
    "less": "^4.3.0",
    "sass": "^1.55.0",
  }

```


#### 打包APP提示:本应用使用 HBuilderX 4.66 或对应的cli版本编译，而手机端SDK版本是 3.96。不匹配的版本可能造成应用异常。


[![](https://iovhm.com/book/uploads/images/gallery/2025-05/scaled-1680-/9NeZylgbLPTty9nx-image-1747842056038.png)](https://iovhm.com/book/uploads/images/gallery/2025-05/9NeZylgbLPTty9nx-image-1747842056038.png)

原因是HBuilder与cli的版本不一致

**方法一：使用与cli版本一致的hbuilder**

历史版本hbuilder下载地址：<https://hx.dcloud.net.cn/Tutorial/HistoryVersion>

~~方法二：在hbuilder里面仅加载项目的src目录进行打包（可以救急，但是不推荐）~~

方法三：将cli的版本升级与HBuilder保持一致

**最简单的方法是使用`npx @dcloudio/uvm@latest`升级到最新版，然后下载最新的hbuilder**

确定HBuilder的cli版本,打开hbuilder的关于界面，确定hbuild的版本

[![](https://iovhm.com/book/uploads/images/gallery/2025-05/scaled-1680-/TIQLXzejDPCOpZq2-image-1747890961030.png)](https://iovhm.com/book/uploads/images/gallery/2025-05/TIQLXzejDPCOpZq2-image-1747890961030.png)


确定hbuilder的详细版本号

[![](https://iovhm.com/book/uploads/images/gallery/2025-05/scaled-1680-/xwhFg9Vv6INknbPO-image-1747891699243.png)](https://iovhm.com/book/uploads/images/gallery/2025-05/xwhFg9Vv6INknbPO-image-1747891699243.png)

确定hbuilder的详细版本号

hbuilderx官网：<https://www.dcloud.io/hbuilderx.html>

[![](https://iovhm.com/book/uploads/images/gallery/2025-05/scaled-1680-/pJbbt1ColKJ9hwuP-image-1747895027694.png)](https://iovhm.com/book/uploads/images/gallery/2025-05/pJbbt1ColKJ9hwuP-image-1747895027694.png)

```
# 将cli的版本与hbuilder保持一致，此时可能报错，提示版本编号应该是x.y.z
# 需要到hbuilder官网找到真正的版本号
# 此时可能还会继续提示例如nodejs版本不匹配，请升级nodejs版本
# 依赖冲突等，例如vite和vue版本冲突，安装提示修改为匹配的版本既可

npx @dcloudio/uvm@latest 4.45.2025010502

npx @dcloudio/uvm@latest 3.96.2023110403

```

##### 部分hbuilder和cli版本对照关系

|hbuilder版本|cli版本|备注|
|---|---|---|
|4.45|4.45.2025010502|---|
|3.96|3.96.2023110403|---|