Vue中实现HBuilder X打包App与部署

Vue中实现HBuilder X打包App与部署

HBuilder是DCloud（数字天堂）推出的一款支持HTML5的Web开发IDE。该软件既可以支持web代码编写，也可以将已经编写好的项目代码打包为手机APP。

---

提示：以下是本篇文章正文内容

一、HBuilder X打包

HBuilder提供的打包有云端打包和本地打包两种，云端打包的特点是DCloud官方配置好了原生的打包环境，可以把HTML等文件编译为原生安装包。

---

二、使用步骤（图解）

1.要把Vue路由模式设置为Hash模式

否则会出现白屏

---

2.在项目目录创建一个vue.config.js文件

内容如下

module.exports = {
	publicPath:'./'
}

---

4.配置axiosURL

改为服务器地址

---

4.执行构建编译

首先package.json文件里面要有build命令

---

然后执行命令：

npm run build

会出现一个dist文件夹。

dist文件夹中index.html文件打开后还是白屏，需要用服务器的方式打开

---

三、连接服务器

1.创建项目文件夹将本地项目拷贝过去

拷贝完成后执行cmd命令npm start运行

---

2.访问服务器

如果无法访问应该是3000端口无法访问

接下来部署服务器端口

---

四.在HBuilder X里面创建一个项目

选择5+App

文件里面会有一个json文件进行自己设置

完成设置后然后把自己的项目文件替换拷贝到5+App文件夹里面

---

1.发行云打包

---

使用测试证书，想要ios证书需要，购买99美元一年

---

2.PM2进程管理

pm2是一个进程管理工具,可以用它来管理你的node进程，并查看node进程的状态，当然也支持性能监控，进程守护，负载均衡等功能

全局安装PM2
npm install -g pm2

启动app项目
把package.json中的nodemon改为pm2 start

执行当前项目
npm start

查看所有进程
pm2 list

本人菜鸟
如有不足，多多指教~~~