uniapp HBuilderX 工程与vue-cli 工程相互转换

最新推荐文章于 2025-05-15 17:21:29 发布

九分库

最新推荐文章于 2025-05-15 17:21:29 发布

阅读量2.7k

点赞数

CC 4.0 BY-SA版权

分类专栏：功能文章标签： vue.js uni-app webpack

本文链接：https://blog.csdn.net/qq_52912134/article/details/127516375

功能专栏收录该内容

48 篇文章

订阅专栏

本文介绍了HBuilderX工程与vue-cli工程的相互转换方法。HBuilderX转vue-cli需通过vue-cli命令行完成环境安装、创建uni-app，再进行移植，包括拷贝文件、安装依赖、更改路径别名；vue-cli转HBuilderX则需复制src目录导入，重新安装依赖。

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

HBuilderX 工程转换为 vue-cli 工程

1.通过vue-cli命令行

1-1 环境安装

全局安装vue-cli（如果安装过忽略此步骤）

目前仍推荐使用 vue-cli 4.x，对于 vue-cli 5.x / Webpack 5 的支持情况参考

npm install -g @vue/cli@4

1-2 创建uni-app

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

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

在这里插入图片描述

2.移植

使用 vue-cli 新建空工程

2-1 拷贝文件

将 HBuilderX 工程内的文件（除 unpackage、node_modules 目录）拷贝至 vue-cli 工程内 src 目录

将package.json 合并到vue-cli创建的新工程中

2-2 安装依赖

在 vue-cli 工程内重新安装 npm 依赖（如果之前使用了 npm 依赖的话）

2-3 更改路径别名

在vue.config.js中更改webpack配置

const path=require('path')  
module.exports = {
    // 配置路径别名  
    configureWebpack: (config) => {  
        config.resolve.alias['@']=path.resolve(__dirname,"./src");
    }
}

vue-cli 工程转换为 HBuilderX 工程

当需要开发 App 端时，可以转换为 HBuilderX 工程（不转换直接在HBuilderX 2.0+中也可以运行）

将 vue-cli 工程（需为uni-app项目）内的 src 目录复制一份，导入 HBuilderX 作为新工程。
在新工程目录内重新安装 npm 依赖（如果之前使用了 npm 依赖的话，记得先 npm init 初始化）