组件umd打包

组件打包，远程调用step 1.创建组件工程、创建模拟门户工程step 2.组件打包umd资源step 3.发布umdjsstep 4. 调用组件需求背景：门户工程维护各产品的介绍页，计划将介绍页搞成可视化配置的，介绍页中自定义的组件需要产品侧自行维护。门户工程动态加载自定义的组件。参考链接step 1.创建组件工程、创建模拟门户工程vue create xxx组件写在HelloWorld.vue

抄代码的雪豹

3642人浏览 · 2022-03-02 10:30:26

抄代码的雪豹 · 2022-03-02 10:30:26 发布

vue组件lib库打包，远程调用

需求背景：门户工程维护各产品的介绍页，计划将介绍页搞成可视化配置的，介绍页中自定义的组件需要产品侧自行维护。门户工程动态加载自定义的组件。

参考链接

step 1.创建组件工程、创建模拟门户工程

vue create xxx

组件写在HelloWorld.vue中

step 2.组件打包umd资源

打包命令
vue-cli-service build --target lib --name myLib [entry]

在package.json中设置打包命令

"lib": "vue-cli-service build --target lib --name spaceFastOrder ./src/components/HelloWorld.vue"

打包生成的文件

step 3.发布umdjs

正式情况下，打包的文件放在服务器上，配置好ng，通过某个url可以访问到打包后的js文件。在开发过程中可以使用http-server把文件放在本地服务器上
安装http-server
npm install http-server@13.x -g
cd到umd.js目录下
http-server

step 4. 调用组件

门户侧规定了组件的调用方法，在模拟门户工程中：

<button @click="load">load</button>
<component v-bind:is="comp"></component>

methods :{
    load () {
      const script = document.createElement('script')
      script.src = "http://localhost:8080/spaceFastOrder.umd.min.js"
      document.head.appendChild(script)
      script.onload = () => {
        const exportCom = window['spaceFastOrder'].default
        this.comp = exportCom
      }
    }
  }

遇到的问题
const exportCom = window['spaceFastOrder'].default这里undefined，
改成const exportCom = window['spaceFastOrder']可以取到组件
在这里插入图片描述入口为js文件时，要以default访问。
添加indes.js文件

import SpaceFastOrder from './HelloWorld'

SpaceFastOrder.install = function(Vue) {
  Vue.component(SpaceFastOrder.name, SpaceFastOrder)
}

export default SpaceFastOrder;

修改打包命令，重新打包即可
但是入口文件为啥要这样写？？