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

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

1. vue打包

npm run build

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

2. 安装hbuilderX

Hbuilder官网地址

3. hbuilderX

1）新建项目

我是vue的，所以直接选择的h5+app，然后起个名字，选择路径。

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

dist文件夹

复制后的hbuilderX项目目录

3）运行

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

4. 打包

1）点击manifest文件

需要在官网注册账号，然后登陆后就会自动生成appId.
这些配置我都没有改，就写了个应用名称。

2）发行

双击项目进行发行

证书直接使用的公共测试证书，其他的没改，然后点击打包

等待打包结束后会自动生成apk文件，发送到手机上即可运行。

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

5. 后端请求

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

之前的index.js中的nginx

现在url直接写死

重新打包安装后，访问完成