H5端编译上传
注意:在编译安装之前必须安装node.js,版本号为18~20
安装链接:https://nodejs.org/en/download/prebuilt-installer
在编译之前首先要给uniapp安装依赖(命令行执行npm install)如下图:
方法一:源码在本地的安装依赖
打开源码所在目录,将路径打开到uniapp下:如图:


安装完依赖之后,会看到在uni-app文件夹下会生成一个node_modules文件夹。如图:
方法二:源码在宝塔时安装依赖
如果源码在宝塔时,和在本地一样找到源码站点的uniapp所在目录,如图:
打开终端,执行 npm install 进行安装依赖,如图:

依赖完成后,同样在uniapp目录下会看到生成一个node_modules文件夹,如图:
如上操作依赖安装完成,接下来就要将uniapp源码包导入开发者工具中进行编译上传了,步骤如下:
一、将uniapp源码包导入到Hbuilder工具中。
这里一定要注意导入的uniapp源码包的路径,很多开发者在这里极容易出错,导入的uniapp源码包不全或者位置错误。
二、填写配置文件。
这里需要说明:在uniapp源码根目录有两个配置文件,.env.development 文件和.env.production文件,这里有必要讲解一下。 .env.development 配置文件是用于本地开发过程中进行实时观看效果,也就是小程序或者发行h5(独立域名时)运行的时候需要填写; .env.production 配置文件是需要发行到线上的时候填写;
这里要特别注意!!!发行h5(默认域名)的时候.env.development这个文件不需要填写;
三、编译
接下来就进行手机端的编译了,可以有两种方式:1:利用Hbuilder工具编译。2、利用命令行编译
方式一、首先来看利用工具如何编译。
点击发行--发行至网站pc或手机H5,填写网站域名和名称

点击发行按钮,等待编译即可,编译完成会生成编译包,如下图所示:
方式二、利用命令行编译
如果是利用命令行编译,就不需要将uniapp导入工具Hbuilder了,直接接上边的安装依赖步骤,安装好依赖后,直接在终端里执行下一步的编译命令即可 npm run build:h5:如下图:
编译完成后,在h5端的文件夹wap下会生成一个编译包,如图:
通过以上任意一种方式,都可以对手机端进行编译,编译好之后,将编译包上传至niucloud/public/wap下,然后访问前端即可。
注意:如果是要上传至线上项目中,上传的只是编译包,那么之后就不能执行云编译,因为云编译是用源码的uniapp进行编译的,所以会导致还原编译包的可能;如果想要解决这一问题,就要把源码的uniapp也上传到根目录下,路径如下:

注意:如果页面空白请检查是否代码用的裸框架且请求的外网服务器,这里要用安装后的代码
