把一个Vue项目的页面打包后再另一个项目中使用

济南小草根2024-12-25 19:03

步骤：

1.项目1新建一个js文件，引入我们需要使用的vue页面：

复制代码

// 引入组件
import indexVue from './index.vue'

// install
indexVue.install = function (Vue) {
  Vue.component("indexVue", indexVue)
  // Vue.component(FlowEditorVue.name, FlowEditorVue)
}


// 导出
export default indexVue

2.在项目1的package.json中添加命令将刚才导出的vue页面进行打包；

复制代码

"lib": "vue-cli-service build --mode prod --target lib --name indexVue --dest lib src/views/workflow/work/index.js"

3.在你需要使用的项目中将打包后的lib目录放在项目2的public目录下；

4.然后再项目2的main.js文件中引入我们lib中的common.js并使用它；

复制代码

import indexVue from '../public/lib/indexVue.common.js'
Vue.use(indexVue)

5.再我们的项目2的页面中直接使用它；

复制代码

<template>
  <div class="app-container">
    <index-vue></index-vue>
  </div>
</template>
<script>

export default {
  name: 'WorkProcess',

  data() {
    return {}

  },
}
</script>

<style scoped>

</style>