v3增加单页面打包

此方法仅可用于 v4 框架访问 v3 单页面

准备工作

1.访问到git

进入到 SystemFront 项目,

2.修改pagejson.json

增加 page 命令，注意 要和上一行有个逗号

 "page": "rimraf dist && mkdirp dist && ncp static dist/static && cross-env VUE_APP_PAGE=true webpack --progress --hide-modules --config build/webpack.prod.conf.js"

3.添加 page.vue

点击这里可以回到主页面

在src目录下添加文件 page.vue 注意文件目录不要错了

内容用下面的内容 可以复制

<template>
  <app-base class="bg">
    <div class='flex'>
      <div class="singpageWarp" v-for='page in pages' v-show='componentName === page.name'>
        <component :is='page.name'
                   :data="page?.props?.data"
                   :row="page?.props?.row"
                   :item="page?.props?.item"
                   :role="page?.props?.role"
                   :f_plan_id="page?.props?.f_plan_id"
                   :f_plan_year="page?.props?.f_plan_year"
                   :f_repairman="page?.props?.f_repairman"
                   :f_subcompany="page?.props?.f_subcompany"
                   :f_userinfo_id="page?.props?.f_userinfo_id"
                   :userid="page?.props?.userid"
                   :userinfo="page?.props?.userinfo"
                   :functions="page?.props?.functions"
                   :goid="page?.props?.goid"
                   :f="page?.props?.f"
                   :user="page?.props?.user"
                   :idx="page?.props?.idx"
                   :jsondata="page?.props?.jsondata"
                   :selectdata="page?.props?.selectdata"
                   :task="page?.props?.task"
                   :opterType="page?.props?.opterType"
                   :service="page?.props?.service"
                   :curActivity="page?.props?.curActivity"
                   :sellType="page?.props?.sellType"
                   :cardData="page?.props?.cardData"
                   :userreflst="page?.props?.userreflst"
                   :userInfo="page?.props?.userInfo"
                   :worktype="page?.props?.worktype"
                   :f_source="page?.props?.f_source"
        ></component>
      </div>
    </div>
  </app-base>
</template>

<script>
  import Vue from 'vue'

  export default {
    title: '加载参数',
    data () {
      return {
        pages: [],
        componentName: null,
        oldComponentName: null,
        reuse: true
      }
    },
    ready () {
      if (!Vue.routes) {
        Vue.routes = {}
      }
      Vue.routes['v3pageWarp'] = this
      this.$nextTick(() => {
        window.addEventListener('message', messageEvent => {
          this.initData(messageEvent)
        })
      })
    },
    methods: {
      initData (messageEvent) {
        try {
          const data = messageEvent.data
          console.log('接收到数据', data)
          if (this.$appdata) {
            this.$login = Object.assign(this.$login, data.login)
            this.$appdata = Object.assign(this.$appdata, data.appdata)
          }
          if (!data.page) {
            this.$showMessage('没有功能连接，请配置!')
            return
          }
          if (!data.mode) {
            this.$showMessage('参数缺失，请检查是否升级了最新版本af-system-vue!')
            return
          }
          if (data.mode === 'add') {
            this.routerAdd(data.page, {})
          } else if (data.mode === 'remove') {
            this.routerDel(data.page)
          }
        } catch (e) {
          console.log('登陆异常', e)
        }
      },
      routerAdd (page) {
        this.init(page, {})
      },
      routerDel (page) {
        this.pages = this.pages.filter((v) => v.name !== page)
      },
      // 返回最上组件
      top () {
        return this.pages[this.pages.length - 1]
      },
      // 设置自己Title，组件切换进来后调用
      setTitle (title) {
        // 给组件最上层card设置title，以便back时能取到title
        let top = this.top()
        top.title = title
        // 发送路由结束事件
        this.$dispatch('route-end', top.name, top.title, this.index)
      },
      // 从外面路由进来
      init (name, props) {
        // 组件可以重用，找到原来组件
        let comp = this.pages.find((value) => {
          return value.name === name
        })
        // 找到了，重用，否则，添加新组件
        this.oldComponentName = this.componentName
        if (comp) {
          this.componentName = comp.name
        } else {
          this.pages.push({name, props})
          this.componentName = name
        }
      }
    },
    events: {
      // 子组件内部调用路由事件处理
      'route' (name, props, self, resoved) {
        // 组件可以重用，找到原来组件
        let compIndex = this.pages.findIndex((value) => {
          return value.name === name
        })
        // 找到了，删除原来的组件，否则，添加新组件
        this.oldComponentName = this.componentName
        if (compIndex !== -1) {
          this.pages.splice(compIndex, 1)
        }
        this.pages.push({name, props, resoved})
        this.componentName = name
      },
      // 从路由器回退到上一个组件事件处理
      'back' (param) {
        this.componentName = this.oldComponentName
        let old = this.pages.pop()
        // 如果有回调函数，用返回值调用回调函数
        if (old.resoved) {
          old.resoved(param)
        }
        // 发送路由结束事件
        let top = this.top()
        this.$dispatch('route-end', top.name, top.title, this.index)
      },
      // 处理从上面广播下来的路由事件
      'route-init' (index, name, props) {
        if (this.index === index) {
          this.pages = [{name, props}]
        }
      }
    }
  }
</script>
<style scoped media="screen">
  .singpageWarp {
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
    position: relative;
  }
</style>

完成后点击下面得提交更改

4. 新增 iotMain.js 文件

内容复制 src/main.js 得内容 需要修改的一行 看下面图里得标注

import App from './page'

完成