# 快速部署

前端部分是基于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 admin.evtp6.pro;
    root /xxxx/evtp6_web/evui/dist;

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

    location @router{
        rewrite ^.*$ /index.html last;
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15