快速部署

前端部分是基于Vue+ElementUI研发，因此本地开发时需要安装 node 软件，下载后直接双击安装即可，前端开发工具推荐使用 VSCode 自行下载安装（群中也有提供）；

软件安装

• Node 安装

此项目为前后端分离项目，前端运行依赖Node进行依赖包管理，因此需要安装Node依赖包管理工具，官网下载地址https://nodejs.org/en/ (opens new window),下载后直接双击安装即可；

• yarn 安装

前端项目使用yarn进行依赖管理，因为安装Node之后需进行yarn安装，全局安装命令为：npm install -g yarn;yarn安装之后需在前端项目跟目录进行依赖安装，安装命令为：yarn install；

警告

安装需以 管理员权限 进行安装，否则会安装失败

• VSCode 安装

前端UI开发工具推微软的开源工具VSCode,官网下载地址https://code.visualstudio.com/ (opens new window)，下载后自动双击安装即可；

访问配置

在启动前端项目服务之前，我们需要对前端框架的请求访问地址进行配置，具体配置文件为 evui\src\config\setting.js 将请求的API地址换成你本地自己配置的域名即可，如下图所示：

特别提示

上述图中的 baseURL 参数配置信息即可后端服务接口域名，切记跟你本地配置的后端服务的访问域名保持一致

启动服务

• 启动服务

执行命令 npm run dev 即可启动本地服务，启动成功后会自动显示本地服务可访问地址，将网址拷贝值浏览器访问即可，如下图所示：

启动服务：

登录页：

系统主页

• 打包发布

执行命令 npm run build 可对前端项目进行打包，打包完成后会在项目根目录自动生成 dist 目录，可以直接将此目录发布到服务并配置域名进行访问，如下图所示：

线上服务器Nginx配置如下：

server
{
    listen 80;
    server_name manage.evl8.com;
    root /xxx/evl_web/evui/dist;

    # 开启gzip功能
    gzip on;
    gzip_min_length 10k;
    gzip_comp_level 9;
    gzip_types text/plain text/css application/javascript application/x-javascript text/javascript application/xml;
    gzip_vary on;
    gzip_disable "MSIE [1-6]\.";

    location /{
        try_files $uri $uri/ @router;
        index index.html;
    }

    location @router{
        rewrite ^.*$ /index.html last;
    }
}