1.前言

最近做了一个外包的h5项目，为了快速开发，使用的是uniapp。在uniapp的开发中主要使用的是hubildx这个开发工具，uniapp可以快速生成一个项目，它的插件市场有大量的插件可供选择。它的基础语法主要是vue,只要掌握vue基础语法，webpack打包便可以完成基础开发。这篇文章主要是描述uniapp做h5上线的流程。

2.前端配置

打包上线前需要一个appiId,这个可以在项目manifest.json文件下面配置

在项目manifest.json文件下面配置h5

这里的运行基础路径一定要配对，我这里使用了./,表示根路径下的任何文件，所以使用./比较保险，端口可以自行选择，但是需要跟nginx保持一致，路由模式因为我这里需要跟微信公众号配合，因此选择history模式。

发行文件，打包h5

上图中网站标题就是浏览器上的标题，类似于doucument.title,网站域名，使用服务器地址，如：81.68.xxx.xx或者浏览器上线后域名(xxx.xxx.cn) 下面代表成功：

打包后，会有一个unpackage文件夹

找到当前文件夹下的h5文件，将h5文件放在服务器上

3.服务器端

服务器端这里使用一个可视化工具MobaXterm 下载地址链接傻瓜式安装后，选择左上角Session,选择SSH

我这里使用的密钥打开服务器在服务器根目录下创建h5文件夹，将之前前端生成的h5文件夹下的static文件夹和index.html文件拖进在当前服务器的根目录下即可

4.ngix配置

server {
			listen       8888;
			server_name  localhost/;
			location / {
				root   c:/xxxx/h5/unpackage/dist/build/h5;
				index  index.html index.htm;
				autoindex on;    
			}	
	}

调整ngix文件配置

我的是在位置 /etc/nginx/nginx.conf(ngix配置文件)下，有一个listen 8888这行下方的root地址，是项目的文件夹地址，可以调整,修改后保存，但是需要先杀死所有nginx进程kill -9 xxx，有三个进程都要杀死，然后在运行/usr/sbin/nginx -c /etc/nginx/nginx.conf

可以在服务器h5目录下，先放置一个静态的html文件，如果可以通过域名地址访问到，则ngix配置成功，否则就是配置不成功。最后访问：https://服务器域名:8888/index.html即可

uniapp h5的上线流程

1.前言

2.前端配置

3.服务器端

4.ngix配置