Vue项目动态切换依赖库版本

背景

大多数项目中要封装对应的业务组件来提供给对应的用户使用。所以基于现有工程的技术框架封装了一系列的组件，并上传至私服，对外提供并使用。

封装组件的过程不多赘述，大家可以自行查阅资料或者参考此文档来进行封装（Vue封装组件并发布到npm仓库）。

在此步骤之后，通常我们就会在现有工程通过 npm install xxxx 命令来安装对应的组件及版本，并使用。

那么如何不在package.json写固定的版本号，而可以使用动态的方法进行组件的注册呢：

比如A用户觉得1.0版本的SDK足以满足他的日常需求，新版本的内容他不感兴趣会一直维持此版本的使用，而B用户觉得1.0版本的SDK不够用，他需要使用新版本的功能，那么此时A用户和B用户就需要使用两个不同的版本。

解决方案

1、不同版本通过后端接口来获取，后端返回对应SDK的版本号及引入SDK需要的js、css文件地址。

2、前端页面加载对应的js， css， 并使用vue.component()来注册组件进行使用。

说明：
当你直接引入index.js和index.css文件时，它们实际上包含了如下内容

index.js：包含了组件的JavaScript逻辑，包括Vue组件的定义、状态管理、事件处理以及模板的渲染逻辑。这个文件会动态创建并插入相应的DOM元素到页面上

index.css：包含了组件的样式定义，确保组件在页面上显示时具有正确的样式

代码实现

1、 获取文件进行加载

2、 将加载好的文件进行注册

3、 在生命周期内执行加载SDK方法

4、 在模板区域使用组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<template>
  <div>
     <my-component v-if="showMyComponent" :key="tagMyComponent"></my-component>  
  </div>
</template>

<script>
export default {
  data() {
    return {
      showMyComponent: false,
      tagMyComponent: 1
      
    }
  },
  mounted() {
  this.loadComponent(jsCdn, cssCdn);
  },
  methods: {
    loadComponent(jsCdn, cssCdn) {
            const script = document.createElement('script');
            script.src = jsCdn;
          
            const link = document.createElement('link');
            link.rel = 'stylesheet';
            link.href = cssCdn;
            const loadScript = new Promise((resolve, reject) => {
                script.onload = () => {
                    console.log(`SDK版本资源 ${cdn} 加载成功.`);
                    resolve();
                };
                script.onerror = () => {
                    console.error(`SDK版本资源 ${cdn} 加载失败.`);
                    reject();
                };
            });
            const loadStyle = new Promise((resolve, reject) => {
                link.onload = () => {
                    console.log(`样式文件 ${cssCdn} 加载成功.`);
                    resolve();
                };
                link.onerror = () => {
                    console.error(`样式文件 ${cssCdn} 加载失败.`);
                    reject();
                };
            });
            // 使用 Promise.all 确保所有资源都加载成功后再进行下一步操作
            Promise.all([loadScript, loadStyle])
                .then(() => {
                    // 所有资源加载成功后执行
                    this.registerComponent();
                })
                .catch(() => {
                    console.error('SDK组件或样式加载失败.');
                });
            document.head.appendChild(script);
            document.head.appendChild(link);
        },
         registerComponent() {
            // 假设动态加载的组件库暴露的名称：MyComponent
           Vue.component('MyComponent', window['MyComponent']);
                console.log('SDK组件挂载成功', Vue.options.components);
                this.showMyComponent = true; //展示组件
                this.tagMyComponent += 1; //强制刷新
        }
  }
}
</script>