Server前端环境搭建

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

WARNING

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

前端简介

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

ug-manager-client: 管理后台前端项目， 对应的后端程序是ug-manager-xstarter；
ug-cps-client: 推广后台前端项目， 对应的后端程序也是ug-manager-xstarter；
ug-quartz-client: 批处理作业管理后台， 对应的后端程序是ug-quartz-xstarter。

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

工程介绍

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

ug-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 其他文件，一般不需要手动修改

配置说明

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

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

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

注意： 

1、 如果是ug-cps-client前端程序， 将该地址也设置为ug-manager-xstarter后端程序的访问地址
2、 如果是ug-quartz-client前端程序， 将该地址设置为ug-quartz-xstarter后端程序的访问地址

编译项目

Note:前端项目开发环境IDEA推荐使用HBuilder X，如果您还没有下载安装，请下载安装: 下载地址; 前端项目需要使用nodejs，如果电脑上还没有安装过nodejs，请先下载并安装nodejs：下载地址

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

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

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

npm install

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

npm run serve

发布前端

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

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

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

npm run build

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

Server前端环境搭建 ​

前端简介 ​

工程介绍 ​

配置说明 ​