Vue中sdk使用方案以及使用nginx代理sdk地址

Vue中sdk使用方案

一、html页面引入，使用这个页面的功能都会加载这个sdk，代码少，会影响部分不需要使用这个sdk的页面打开速度。

具体代码

// xxx.html
<script src="http://+地址+/sdk文件名1.js" />
<script src="http://+地址+/sdk文件名2.js" />
// xxx.vue
// 挂载到实例上去之后调用
 mounted () {
   // 一般放到 window对象里面
   if (!window.sdk对象名) {
        console.log('invalid sdk')
    } else {
       // sdk 初始化逻辑

    }

 }

二、全局组件引入，每个页面引入都需要单独的代码，不会影响部分不需要使用这个sdk的页面打开速度。

具体代码

# xxx.js 全局组件
Vue.component('sdk-script', {
  render: function (createElement) {
    const self = this;
    return createElement('script', {
      attrs: {
        type: 'text/javascript',
        src: this.src,
      },
      on: {
        load: function (event) {
          // 加载
          self.$emit('load', event);
        },
        error: function (event) {
          // 异常
          self.$emit('error', event);
        },
        readystatechange: function (event) {
           // 更新
        },
      },
    });
  },
  props: {
    src: {
      type: String,
      required: true,
    },
  },
})
# xxx.vue
// 每个vue文件单独引入
<template>
 <skd-script src="http://+地址+/sdk文件名1.js"/>
</template>
// 挂载到实例上去之后调用
 mounted () {
   // 一般放到 window对象里面
   if (!window.sdk对象名) {
        console.log('invalid sdk')
    } else {
       // sdk 初始化逻辑

    }

 }

nginx代理sdk地址

nginx代理sdk遇到的小坑，主要是ws服务没生效。如果sdk里面用到其他的还要根据具体情况做处理。

nginx配置代码

http {
    // 变量 $connection_upgrade，它会根据 $http_upgrade 的值设置为 upgrade 或 close
    map $http_upgrade $connection_upgrade {
        default upgrade;
        ''      close;
    }
 
    server {
        listen 80;
        server_name  localhost;
 
        location /sdk {
            proxy_pass sdk地址（ip+端口）;
            # 确保Nginx 使用 HTTP/1.1，这对于 Upgrade 请求是必要的。
            proxy_http_version 1.1;
            # 处理websokect
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection $connection_upgrade;
 
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Forwarded-Proto $scheme;
        }
    }
}