[英]How do I load an externally hosted (CDN) JS library *before* the VueJS instance is created?
[英]how to load signal in CDN VueJS application
我一直在我的 vuejs 应用程序中加载 SignalR,我已经包含了 CDN,但无法加载库
output:signalR 安装undefined
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue CDN</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-toastify@latest"></script>
<script src="https://cdn.jsdelivr.net/npm/@microsoft/signalr@5.0.3/dist/cjs/index.min.js"></script>
<style>
</style>
</head>
<body>
<div id="app">
<global-component ></global-component>
</div>
</body>
<script>
Vue.use(window['vue-toastify'].default);
Vue.component('global-component', {
data: function () {
return {
message: `I'm from Global`,
connection: null,
}
},
mounted() {
console.log('vue-toastify', window['vue-toastify']);
console.log('Signalr mounted', window['signalR']); // output : Undefined
var signalR = window.signalR;
try {
this.connection = new signalR.HubConnectionBuilder()
.withUrl("https://ab.xyz.com/signalhub/", {})
.withAutomaticReconnect()
.build();
console.log('Signalr Connection', connection);
} catch (error) {
console.error('SignalR error ', error)
}
this.$vToastify.success('Mounted...');
},
template: `
<div> Hey.... {{message}} </br> </div>
`,
components: {},
methods: {}
});
const myVueInstance = new Vue({
el: "#app"
})
</script>
</html>
任何帮助将不胜感激
要在浏览器中使用 CDN 中的 SignalR,请使用浏览器构建(您当前使用的是 CommonJS 构建):
https://cdn.jsdelivr.net/npm/@microsoft/signalr@5.0.3/dist/browser/signalr.min.js
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script> <script src="https://cdn.jsdelivr.net/npm/vue-toastify@latest"></script> <script src="https://cdn.jsdelivr.net/npm/@microsoft/signalr@5.0.3/dist/browser/signalr.min.js"></script> <div id="app"> <global-component ></global-component> </div> <script> Vue.use(window['vue-toastify'].default); Vue.component('global-component', { data: function () { return { message: `I'm from Global`, connection: null, } }, mounted() { console.log('Signalr mounted', window['signalR']); var signalR = window.signalR; try { this.connection = new signalR.HubConnectionBuilder().withUrl("https://ab.xyz.com/signalhub/", {}).withAutomaticReconnect().build(); console.log('Signalr Connection', this.connection); } catch (error) { console.error('SignalR error ', error) } this.$vToastify.success('Mounted...'); }, template: ` <div> Hey.... {{message}} </br> </div> `, }); const myVueInstance = new Vue({ el: "#app" }) </script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.