在现有JSF应用中集成Vue组件：如何按需渲染指定组件？

1. 先改Vue项目的打包配置（解决加载整个应用的核心） #

你之前用npm run build打包的是完整Vue应用，带路由这类应用级代码，得改成组件库模式打包，只输出组件本身：

Vue 2 + Vue CLI配置（vue.config.js） #

module.exports = {
  configureWebpack: {
    output: {
      library: 'MyVueComponents', // 全局暴露的组件库名称
      libraryTarget: 'umd' // 支持浏览器、Node等多种引入方式
    }
  }
}

Vue 3 + Vite配置（vite.config.js） #

export default {
  build: {
    lib: {
      entry: 'src/components/index.js', // 组件入口文件
      name: 'MyVueComponents',
      fileName: 'my-vue-components'
    }
  }
}

组件导出规范 #

在组件文件（比如MyComponent.vue）里明确导出：

// Vue 2
export default {
  name: 'MyComponent',
  // 组件逻辑、props、methods等
}

// Vue 3
import { defineComponent } from 'vue'
export default defineComponent({
  name: 'MyComponent',
  // 组件逻辑、props、methods等
})

新建src/components/index.js统一导出需要的组件：

// Vue 2/Vue 3通用
import MyComponent from './MyComponent.vue'
import UserProfile from './UserProfile.vue'
import OrderList from './OrderList.vue'

export { MyComponent, UserProfile, OrderList }

重新执行npm run build，生成的dist文件就是纯组件库，不带路由和应用壳子。

2. 在JSF页面按需注册渲染组件 #

现在在JSF页面里，只引入需要的组件包，手动初始化Vue实例，指定渲染目标：

<!-- JSF页面里的组件容器 -->
<div id="vue-component-root"></div>

<!-- 引入Vue基础库（如果项目没全局引入的话） -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!-- Vue 3用这个：<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.js"></script> -->

<!-- 引入打包后的组件库 -->
<script src="/static/js/my-vue-components.umd.js"></script>

<script>
// Vue 2写法
new Vue({
  el: '#vue-component-root',
  components: {
    MyComponent: MyVueComponents.MyComponent // 对应打包时的library名称
  },
  template: '<MyComponent :user-id="1001" :show-detail="true"></MyComponent>',
  data() {
    return {
      userId: 1001,
      showDetail: true
    }
  }
})

// Vue 3写法
const { createApp } = Vue
createApp({
  components: {
    MyComponent: MyVueComponents.MyComponent
  },
  template: '<MyComponent :user-id="1001" :show-detail="true"></MyComponent>',
  data() {
    return {
      userId: 1001,
      showDetail: true
    }
  }
}).mount('#vue-component-root')
</script>

这样只会渲染你指定的组件，不会加载整个Vue应用的多余内容。

3. 根据页面URL自动加载对应组件 #

通过JS获取当前页面的URL路径，判断后渲染匹配的组件：

<div id="vue-component-root"></div>

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="/static/js/my-vue-components.umd.js"></script>

<script>
const currentPath = window.location.pathname
let targetComp = null

// 根据URL路径匹配组件
if (currentPath.includes('/user/profile')) {
  targetComp = MyVueComponents.UserProfile
} else if (currentPath.includes('/order/list')) {
  targetComp = MyVueComponents.OrderList
} else {
  targetComp = MyVueComponents.MyComponent
}

new Vue({
  el: '#vue-component-root',
  components: {
    TargetComp: targetComp
  },
  template: '<TargetComp></TargetComp>'
})
</script>

4. 同一页面渲染多个不同Vue组件 #

给每个组件分配独立的容器，分别初始化Vue实例即可：

<!-- 组件1容器 -->
<div id="profile-container"></div>
<!-- 组件2容器 -->
<div id="order-container"></div>

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="/static/js/my-vue-components.umd.js"></script>

<script>
// 渲染用户组件
new Vue({
  el: '#profile-container',
  components: {
    UserProfile: MyVueComponents.UserProfile
  },
  template: '<UserProfile :user-id="1001"></UserProfile>'
})

// 渲染订单组件
new Vue({
  el: '#order-container',
  components: {
    OrderList: MyVueComponents.OrderList
  },
  template: '<OrderList :status="active"></OrderList>'
})
</script>

内容的提问来源于stack exchange，提问作者Matt