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;
}
}
}