ThinkChat2.0新版上线,更智能更精彩,支持会话、画图、阅读、搜索等,送10W Token,即刻开启你的AI之旅 广告
# :-: H5端编译上传 > **注意:在编译安装之前必须安装node.js,版本号为18~20** > 安装链接:https://nodejs.org/en/download/prebuilt-installer > 在编译之前首先要给uniapp安装依赖(命令行执行npm install)如下图: ## 方法一:源码在本地的安装依赖 打开源码所在目录,将路径打开到uniapp下:如图: ![](https://img.kancloud.cn/ed/14/ed14d8430f039b45cdfb9371c527a62a_801x532.png) ![](https://img.kancloud.cn/e5/7a/e57aefd3affe8c012d1b0bbb3818159f_1240x772.png) ![](https://img.kancloud.cn/bd/8d/bd8d98fc193b0787ba353e7501133ee1_1244x821.png) 安装完依赖之后,会看到在uni-app文件夹下会生成一个node_modules文件夹。如图: ![](https://img.kancloud.cn/98/14/981408d6554f089bcdfe4bfa3bd5783e_1234x726.png) ## 方法二:源码在宝塔时安装依赖 如果源码在宝塔时,和在本地一样找到源码站点的uniapp所在目录,如图: ![](https://img.kancloud.cn/49/05/490594dbffdd6c2d9e0e6146d2fd278c_1877x867.png) 打开终端,执行 npm install 进行安装依赖,如图: ![](https://img.kancloud.cn/df/92/df92d40dff18b544198a701ef45d044b_1354x804.png) ![](https://img.kancloud.cn/a8/9a/a89a5295d95bb796920774844529ca31_1677x831.png) 依赖完成后,同样在uniapp目录下会看到生成一个node_modules文件夹,如图: ![](https://img.kancloud.cn/a9/9d/a99da8fc580cc9dd2177ccea864345ba_1888x794.png) 如上操作依赖安装完成,接下来就要将uniapp源码包导入开发者工具中进行编译上传了,步骤如下: ## 一、将uniapp源码包导入到Hbuilder工具中。 这里一定要注意导入的uniapp源码包的路径,很多开发者在这里极容易出错,导入的uniapp源码包不全或者位置错误。 ![](https://img.kancloud.cn/8d/76/8d76996798a6e86d7f5b475f2f2848fb_1244x631.png) ## 二、填写配置文件。 这里需要说明:在uniapp源码根目录有两个配置文件,.env.development 文件和.env.production文件,这里有必要讲解一下。 .env.development 配置文件是用于本地开发过程中进行实时观看效果,也就是小程序或者h5运行的时候填写; .env.production 配置文件是需要发行到线上的时候填写; ![](https://img.kancloud.cn/31/0a/310a352ae6d37e0349890bba76689e4b_1277x803.png) ## 三、编译 接下来就进行手机端的编译了,可以有两种方式:1:利用Hbuilder工具编译。2、利用命令行编译 方式一、首先来看利用工具如何编译。 点击发行--发行至网站pc或手机H5,填写网站域名和名称 ![](https://img.kancloud.cn/c8/18/c818ebba145aac7f6341fb7bfefc1ac4_1305x756.png) ![](https://img.kancloud.cn/d5/64/d564d18a9e15405376975628f2e2a1c0_1222x653.png) 点击发行按钮,等待编译即可,编译完成会生成编译包,如下图所示: ![](https://img.kancloud.cn/5b/41/5b41ed0c7fdc404c1264b6ae24299592_1369x731.png) 方式二、利用命令行编译 如果是利用命令行编译,就不需要将uniapp导入工具Hbuilder了,直接接上边的安装依赖步骤,安装好依赖后,直接在终端里执行下一步的编译命令即可 npm run build:h5:如下图: ![](https://img.kancloud.cn/13/af/13afd8cd747111ca3a6024f8a8c536db_993x519.png) 编译完成后,在h5端的文件夹wap下会生成一个编译包,如图: ![](https://img.kancloud.cn/ef/5f/ef5f32c14f1881b1ba227c0db554e97c_903x391.png) 通过以上任意一种方式,都可以对手机端进行编译,编译好之后,将编译包上传至niucloud/public/wap下,然后访问前端即可。 ![](https://img.kancloud.cn/12/ba/12ba388b2aab26bda73e40a7f53debcb_1117x806.png) ### **注意:如果是要上传至线上项目中,上传的只是编译包,那么之后就不能执行云编译,因为云编译是用源码的uniapp进行编译的,所以会导致还原编译包的可能;如果想要解决这一问题,就要把源码的uniapp也上传到根目录下,路径如下:** ![](https://img.kancloud.cn/ce/0f/ce0f00bd24c18c6968164281709e956a_1118x716.png) 注意:如果页面空白请检查是否代码用的裸框架且请求的外网服务器,这里要用安装后的代码