源码打包准备

  • 源代码;
  • nodejs环境;

源码目录结构

├── build                      # 构建相关
│   ├──build.js                #生产环境构建
├── dist                       # 开发环境打包后的平台(index.html和static文件夹)【svn忽略】
├── node_modules               # npm 包【svn忽略】
├── public                     # 静态资源
│   │── static                 # 第三方资源(不打包资源)  富文本ueditor
│   │── favicon.ico            # favicon图标
│   └── index.html             # html模板

├── src                        # 源代码
│   ├── api                    # 所有请求
│   ├── assets                 # 主题 字体等静态资源
│   ├── business               # 业务组件(该组件是包含业务数据,比如人员选择器、上传附件、数据字典等)
│   ├── components             # 全局公用组件
│   ├── directives             # 全局指令
│   ├── filters                # 全局过滤
│   ├── i18n                   # 国际化 language
│   ├── icons                  # 项目所有 svg icons
│   ├── layout                 # 全局 layout,目前有header-aside布局
│   ├── router                 # 路由
│   ├── pages                  # 公用页面  不涉及过多业务,比如错误页面,登录
│   ├── plugins                # 插件 封装(或者集成第三方)了一些插件,方便开发者进行开发
│   ├── store                  # 全局 store管理 vuex
│   ├── utils                  # 全局公用方法(帮助类)
│   ├── views                  # views 所有页面
│   ├── App.vue                # 入口页面
│   ├── main.js                # 入口文件 加载组件 初始化等
│   └── permission.js          # 权限管理
│   └── setting.js             # 全局默认配置
├── tests                      # 测试
├── .env.xxx                   # 环境变量配置
├── .eslintrc.js               # eslint 配置项
├── .babelrc                   # babel-loader 配置
├── .travis.yml                # 自动化CI配置
├── vue.config.js              # vue-cli 配置
└── package.json               # package.json

命令说明

npm install                    # 依赖安装,打包前必须执行
npm run build                # 打包编译为静态文件,可直接部署到nginx容器
npm run fix-memory-limit    # 打包时出现内存溢出,需要执行该命令修复内存

命令定义

命令是在package.json文件中维护的

  "scripts": {
    "dev": "vue-cli-service serve", # 启动开发环境,未经压缩的代码,可调式
    "build:prod": "vue-cli-service build", # 生成打包,压缩的代码,不便调试
    "build:prod:207": "vue-cli-service build --mode prod207", # 内部测试环境,压缩的代码,不便调试
    "build:stage": "vue-cli-service build --mode staging", # 测试环境,压缩的代码,不便调试
    "build": "npm run build:prod",# 生成打包,压缩的代码,不便调试
    "fix-memory-limit": "cross-env LIMIT=4096 increase-memory-limit" # 内存修复命令
  }

打包编译

在源码根目录执行modules\ibps-admin-ui

  1. win+r打开cmd命令界面

  2. 进入源码根目录

  3. 安装依赖

     npm install

    ui_1

    ui_2

  4. 打包编译

     npm run build

    ui_3

    ui_4

    看到DONE Build complete. The dist directory is redy to be deployed.表示编译成功了。

获取部署程序

  • modules\ibps-admin-ui\dist,前端应用程序包,拷贝到nginx容器部署即可。

附录

  • 如何添加二级目录发布,例:http://v3.bpmhome.cn/ibps ,使用域名二级目录访问。

    • 修改modules\ibps-admin-ui\.env.production文件
      修改前:

      # 生成环境
      # 标记当前构建方式
      ENV = 'production'
      
      #基础路径 注意:发布之前如果不是根目录需先修改这里,并开启。默认是'/'(根目录)
      #VUE_APP_PUBLIC_PATH  = '/'
      
      # ========base api======================
      VUE_APP_BASE_API = 'http://yapi.bpmhome.cn:3000/mock/14/ibps'
      VUE_APP_BASE_WEBSOCKET_API = 'ws://yapi.bpmhome.cn:28888'

      修改后:

      # 生成环境
      # 标记当前构建方式
      ENV = 'production'
      
      #基础路径 注意:发布之前如果不是根目录需先修改这里,并开启。默认是'/'(根目录)
      VUE_APP_PUBLIC_PATH  = '/ibps/' # 打开注释,修改为"/ibps/"注意目录前后都有分隔符"/"
      
      # ========base api======================
      VUE_APP_BASE_API = 'http://yapi.bpmhome.cn:3000/mock/14/ibps'
      VUE_APP_BASE_WEBSOCKET_API = 'ws://yapi.bpmhome.cn:28888'
  • 如何修改后端服务的地址为http://api.bpmhome.cn:5100/ibps

    • 修改modules\ibps-admin-ui\.env.production文件
      修改前:

      # 生成环境
      # 标记当前构建方式
      ENV = 'production'
      
      #基础路径 注意:发布之前如果不是根目录需先修改这里,并开启。默认是'/'(根目录)
      #VUE_APP_PUBLIC_PATH  = '/'
      
      # ========base api======================
      VUE_APP_BASE_API = 'http://api.bpmhome.cn:15100/ibps'
      VUE_APP_BASE_WEBSOCKET_API = 'ws://api.bpmhome.cn:15888'

      修改后:

      # 生成环境
      # 标记当前构建方式
      ENV = 'production'
      
      #基础路径 注意:发布之前如果不是根目录需先修改这里,并开启。默认是'/'(根目录)
      #VUE_APP_PUBLIC_PATH  = '/'
      
      # ========base api======================
      VUE_APP_BASE_API = 'http://api.bpmhome.cn:5100/ibps' # 修改位置
      VUE_APP_BASE_WEBSOCKET_API = 'ws://api.bpmhome.cn:5888' # 修改位置
文档更新时间: 2019-10-31 16:28   作者:Eddy