vue前后端分离项目打包成app,部署成移动端

ゝ一纸荒年。 2024-03-30 10:07 90阅读 0赞

将vue项目打包成app,在手机上运行。

### 1. vue打包 ###

> npm run build

先将vue的前端项目打包成dist文件夹

### 2. 安装hbuilderX ###

[Hbuilder官网地址][Hbuilder]

### 3. hbuilderX ###

#### 1）新建项目 ####

![在这里插入图片描述][6d80c4fb2ea9457fb8351a30e14ad44a.png]  
![在这里插入图片描述][ccacca742587468fa78f81303fbdcb4b.png]  
我是vue的，所以直接选择的h5+app，然后起个名字，选择路径。

#### 2）删除掉自动生成的css js等文件夹，把之前的dist文件夹中内容，直接复制到新建项目中 ####

dist文件夹  
![在这里插入图片描述][2667e14933a14128bc706db7a71bbb73.png]  
复制后的hbuilderX项目目录

![在这里插入图片描述][10acb5d7b9374c7bba3a65d8028c3aff.png]

#### 3）运行 ####

![在这里插入图片描述][7a7f625f56134150979e22bc83ac2ccc.png]

可内置浏览器运行，然后看页面是否正常，如果页面空白说明出了问题

### 4. 打包 ###

#### 1）点击manifest文件 ####

![在这里插入图片描述][526e489514e7476886ad0a76ca443863.png]  
需要在官网注册账号，然后登陆后就会自动生成appId.  
这些配置我都没有改，就写了个应用名称。

#### 2）发行 ####

双击项目进行发行  
![在这里插入图片描述][9500c5d22e80439194bf901fc903bb1e.png]

证书直接使用的公共测试证书，其他的没改，然后点击打包  
![在这里插入图片描述][387e5bea0e4a42459b304ee117320225.png]  
等待打包结束后会自动生成apk文件，发送到手机上即可运行。

小插曲：会提示有通讯录权限，无法打包。  
由于我的项目不使用通讯录，于是直接返回前面把权限配置中的通讯录权限去掉勾选了

### 5. 后端请求 ###

安装后，由于app上nginx无法转发，导致请求地址一直不对，于是将前端页面的请求地址写死了。

之前的index.js中的nginx

![在这里插入图片描述][c6a2a3ba9dbc4debaaef0a347c9c95c3.png]

现在url直接写死  
![在这里插入图片描述][a245cde9895245c59af1390338bf5828.png]  
重新打包安装后，访问完成

[Hbuilder]: https://www.dcloud.io/hbuilderx.html
[6d80c4fb2ea9457fb8351a30e14ad44a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/fb220530c58f4bf38bcc9d0cf2156ab9.png
[ccacca742587468fa78f81303fbdcb4b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/e66849360e9740f3854e64de5dd7febc.png
[2667e14933a14128bc706db7a71bbb73.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/d6034be1d9444c42824fe6cd5fd3792a.png
[10acb5d7b9374c7bba3a65d8028c3aff.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/f19b1ba979104dd197c572a53f4e6f6e.png
[7a7f625f56134150979e22bc83ac2ccc.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/8ed4af4450654b05aa167167f52889b8.png
[526e489514e7476886ad0a76ca443863.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/7d8bc133330e4c51b5ca430f8e0013cd.png
[9500c5d22e80439194bf901fc903bb1e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/c585a5875e824aa494bd64f443f30ce0.png
[387e5bea0e4a42459b304ee117320225.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/f13cbecb1a114aef8c4c03c1ecb261f9.png
[c6a2a3ba9dbc4debaaef0a347c9c95c3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/14dbba7d3110416ca25c3bd3ad01e074.png
[a245cde9895245c59af1390338bf5828.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/998991c89db64135aca99e1f3f5212fa.png