Server前端环境搭建

IMPORTANT

U8聚合SDK管理后台、 Quartz作业调度中心均采用前后端分离方式开发，后端程序(server工程)中无任何前端html, js, css等文件， 只提供API方式的访问和数据返回。 前端项目中则使用了当前热门主流的开发框架Vue+Element来开发，代码简练，可维护性好，开发效率高。

本文档介绍Server前端源码工程的导入和配置，以及发布方式；需要使用nodejs，如果电脑上还没有安装过nodejs，请先下载并安装nodejs： 下载地址; 推荐使用HBuilder X进行开发环境搭建: 下载地址

前端简介

U8聚合SDK中有两个后台管理系统项目，都采用的前后端分离方式开发的， 前端部分（浏览器中访问的网页部分）的项目结构都是一致的：

u8-manager-client: 管理后台前端项目， 对应的后端程序是u8-x-manager；
u8-quartz-client: 批处理作业管理后台， 对应的后端程序是u8-x-quartz。

这里我们仅以u8-manager-client管理后台前端项目来演示搭建过程。

工程介绍

u8-manager-client是管理后台的前端项目工程，工程结构如下：

1、 dist: 发布目录，使用编译命令[npm run build]之后，生成的可发布程序就在这个目录下

2、 node_modules: 使用npm install相关依赖之后，项目相关的依赖库会下载到该目录下，不需要手动更改该目录下的内容

3、 public: 该目录下的所有文件不会经过webpack处理

4、 src： 该目录下就是前端源码目录了，里面基本就是功能相关的js文件和vue文件了。

5、 其他文件：
	6.1 .env 正式环境对应的环境变量配置文件， 里面有Server端地址的配置
	6.2 .env.development 开发环境对应的环境变量配置文件，里面有Server段地址的配置
	6.2 vue.config.js 打包和编译配置文件
	6.6 其他文件，一般不需要手动修改

配置说明

前端程序需要访问后端程序(u8-x-manager程序)，我们可以在.env和.env.development文件中修改后端程序(u8-x-manager程序)的访问地址：

打开.env文件（开发环境打开.env.developement），将里面如下配置更改一下:

VUE_APP_API: 配置为u8-x-manager后端程序的访问地址，请注意： URL地址最后请携带上/， 比如: http://localhost:12202/

编译项目

默认的npm 仓库下载速度慢，我们可以先将npm 仓库切换为国内淘宝镜像；安装npm之后， 可以在命令行中，使用如下命令切换镜像：

npm config set registry https://registry.npm.taobao.org/

设置好镜像之后， 命令行中切换到客户端工程u8-manager-client目录下，执行如下命令安装对应的依赖：

npm install

所有依赖安装完成之后， 我们可以输入如下命令， 等待编译成功之后， 控制台有列出当前访问url地址， 一般默认是http://localhost:8080，如果8080端口被占用，那么会往后加一，比如http://localhost:8081

npm run serve

发布前端

通过上面的步骤之后， 我们可以用HBuilder X打开u8-manager-client工程， 然后直接在菜单-》运行-》运行到终端-》npm run serve来基于当前工程，直接运行前端程序。

这种方式适合我们在开发调试的时候使用， 更改vue代码之后，浏览器中界面会自动完成内容更新，可以快速开发和调试。

如果需要生成可以部署的程序， 我们可以使用如下命令进行编译：

npm run build

编译之后， 生成的发布程序在当前工程/dist目录下。 然后就可以将dist目录下的所有内容，拷贝到任何web服务器中对应的目录下，比如Ngnix，Apache，IIS等