# vueElementAdmin

**Repository Path**: qq351498816/vueElementAdmin

## Basic Information

- **Project Name**: vueElementAdmin
- **Description**: vue+ssm的前后端分离的基础功能模版（前端部分）
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 6
- **Forks**: 0
- **Created**: 2020-03-19
- **Last Updated**: 2024-10-04

## Categories & Tags

**Categories**: backend

**Tags**: None

## README

# wueElementAdmin

#### 介绍
这是一个vue+ssm的前后端分离的基础功能模版（前端部分）[后端项目地址](https://gitee.com/qq351498816/ssmTemplate)，后续还会不断完善功能、解决bug。

前端使用的是[vue-element-admin](https://github.com/PanJiaChen/vue-element-admin), 


### 内置功能

1.  用户管理：编辑用户基本信息。
2.  角色管理：管理用户-菜单、用户-api接口、用户-工作流权限。
3.  系统接口：根据业务代码自动生成相关的api接口文档。
4.  工作流：整合了activiti6、可在线创建、编辑工作流，管理、查看流程任务。


### 演示图
![输入图片说明](https://images.gitee.com/uploads/images/2020/0402/143231_942bff4f_5309306.png "屏幕截图.png")
![输入图片说明](https://images.gitee.com/uploads/images/2020/0402/144106_aa0f6fe6_5309306.png "屏幕截图.png")
![输入图片说明](https://images.gitee.com/uploads/images/2020/0402/144326_b3ed4b99_5309306.png "屏幕截图.png")
![输入图片说明](https://images.gitee.com/uploads/images/2020/0402/144426_1136412c_5309306.png "屏幕截图.png")
![输入图片说明](https://images.gitee.com/uploads/images/2020/0402/144523_33e2d711_5309306.png "屏幕截图.png")

### 安装
1.  下载好代码后，进入到项目根目录
2.  安装依赖：<code>npm install</code>
3.  如果提示错误的话就执行：<code>npm audit fix</code>
4.  运行：<code>npm run dev</code>
5.  浏览器上打开：http://localhost:8092/
6.  当后端代码也成功启动后系统就可以使用了,账号：admin 密码：zzxxssaaz

##### 注意：
默认后端端口8077、前端端口8092

"模版管理"、"swagger接口文档"界面 是直接iframe后端的链接所以要使用这两个界面请到对应的界面修改url

##### 需要更改地址/端口时：
在文件 .env.development 中  VUE_APP_BASE_API = 'http://xxx.xxx.xxx:xxxx/' 设置测试境的后端地址

在文件 .env.production 中  VUE_APP_BASE_API = 'http://xxx.xxx.xxx:xxxx/' 设置生产环境的后端地址

在文件 vue.config.js 中 proxy: 的 target: 'http://xxx.xxx.xxx:xxxx' 设置后端地址

在文件 vue.config.js 中 的 const port = process.env.port || process.env.npm_config_port || 8092 // dev port 设置前端端口


### 部署
#### 一般部署
执行: <code>npm run build:prod --report</code> 将在vue项目根目录下产生一个新的dist文件

将这个文件压缩成zip包然后压缩到(nginx或apache)服务器上对应端口下的目录

#### docker部署
1.创建Dockerfile文件

并编辑内容:


    FROM nginx
    COPY dist/ /usr/share/nginx/html/
    COPY nginx/default.conf /etc/nginx/conf.d/default.conf



2.创建nginx.conf文件

并编辑内容:

    #user  nobody;
    worker_processes  1;
      
    #error_log  logs/error.log;
    #error_log  logs/error.log  notice;
    #error_log  logs/error.log  info;
      
    #pid        logs/nginx.pid;
      
      
    events {
        worker_connections  1024;
    }
      
      
    http {
        include       mime.types;
        default_type  application/octet-stream;
      
        #access_log  logs/access.log  main;
      
        sendfile        on;
        #tcp_nopush     on;
      
        #keepalive_timeout  0;
        keepalive_timeout  65;
      
        #gzip  on;
      
        client_max_body_size   20m;
        server {
            listen       8091;
            server_name  www.aaaaaa.com;
      
            #charset koi8-r;
      
            #access_log  logs/host.access.log  main;
         location / {
            root   /usr/share/nginx/html;
            index  index.html index.htm;
            try_files $uri $uri/ /index.html;
        }
   
        }
    }


3.将以上两个文件放到vue项目根目录下

4.创建镜像

在项目根目录下执行命令：<code>docker build -t vuenginxcontainer .</code>

5.运行镜像

在项目根目录下执行命令：<code>docker run -p 3000:80 -d --name vueApp  vuenginxcontainer</code>

6.效果

在浏览器上输入ip地址+端口（3000）即可

例如：localhost:3000