vue多业务线合并方案

最新推荐文章于 2025-07-03 20:31:08 发布

sdouara13

最新推荐文章于 2025-07-03 20:31:08 发布

阅读量838

点赞数

CC 4.0 BY-SA版权

文章标签： vue 前端

本文链接：https://blog.youkuaiyun.com/sdouara13/article/details/84549439

本文介绍了在Vue项目中处理多业务线的合并方案，包括依赖引入、基础组件抽离、异步加载子业务线组件、动态路由配置、动态模板的制作与使用。通过异步注册组件和动态路由实现按需加载，同时利用动态模板提高代码复用性和灵活性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、依赖引入：

主业务线引入vue、vuex、公共方法、公共组件，并绑定到window对象，需要异步加载的子业务线通过window.XXX进行引入，不需要再次Import。

二、基础组件：

抽离与业务无关组件，如dialog、toast等。

三、异步加载：

将子业务线组件化。
在主业务线的配置文件中添加相关配置，如子业务线相关参数、js文件的url地址。异步注册组件：

const src = MY_JS_SRC

Vue.component(COMPONENT_NAME, (resolve, reject) => {

download(src).then((component) => {

resolve(component)

}).catch(() => {

reject()

})

动态路由：

路由配置如下：

{

path: 'pathA', // 固定路由A

component: componentA

{

path: 'pathB', // 固定路由B

component: componentB

//...

{

path: '/:name', // 按参数匹配异步组件

component: AsyncLoadComponent // 动态加载组件

}

AsyncLoadComponent基本实现：

</template>

……

created() {

this.setCurrent() // 设置当前动态路由

}，

methods: {

setCurrent() {

const name = this.$route.params.name

const component = GET_LOADED_COMPONENT // 把已经下载的component引入，可以通过vuex、也可以通过生产、消费者模式，不建议vuex存储业务无关数据

if (component) {

this.currentRouter = component

}

动态模板制作：

同一内容可能有不同模板支持，为了方便开发可以参考制作动态模板。

动态模板demo：

export default {
  name: "dynamicTemplate",
  components: {
  },

props: {

template: { // 传入的模板字符串

type: String,

default: “”

}

data() {

templateData: [‘a’, ‘b’, ‘c’, ‘d’, ‘e’] // 测试模板数据

},
  render: function (createElement, context) {
    const self = this;
    const args = arguments;

this.template.replace(/TEMPLATE_DATA/g, this.templateData)
   return createElement('div', {
    class: ‘templateCls’,
    style: {
     ……

},
    on: {
     ……
    }
  },
  [
    // 编辑数据模板
    Vue.compile(self.template)
      .render
      .apply(self.$parent, args)
  ]
)

}
},

}

使用模板：

<template>
  <div>
    <dynamicTemplate :template="template">
    </dynamicTemplate>
  </div>
</template>

<script>

export default {
    name: "list",

components: {
       dynamicTemplate,
    },
    data() {
        return {
           list: [1,2,3,4,5],
           template: `
                <div v-if="TEMPLATE_DATA" >
                  <div :key="item" v-for='item in list'>
                    <div:item="TEMPLATE_DATA.data[item - 1]"></div>
                  </div>
                </div>
              `,
        };
    }
};
</script>