Javascript 从WebApi提供分布式Vue组件
我需要能够从asp.net核心WebApi导入和呈现vue组件 我遵循这一思路,想出了下面的代码 端点确实被命中,并像我预期的那样返回打包组件字符串,但我在控制台中看到以下错误: 拒绝从“”执行脚本https://localhost:44385/api/DistributedComponent/Test'因为它的MIME类型('application/json')不可执行,并且启用了严格的MIME类型检查 及 vue.js:634[vue warn]:解析异步组件失败:函数(){return\uu waiter(_this,void 0,void 0,函数(){return\uu生成器(this,函数(_a)){ 开关(a.标签){ 案例0:return[4/yield/,Object(js_util_external_component_网页_IMPORTED_MODULE_3[“default”])('https://localhost:44385/api/DistributedComponent/Test')]; 案例1:return[2/return/,_a.sent()]; } }); }); } 原因:TypeError:检测到promise的链接周期# 我怀疑我没有正确返回组件字符串,但是我应该如何返回它呢?我如何使用这些错误信息来帮助我理解我做错了什么 外部组件.jsJavascript 从WebApi提供分布式Vue组件,javascript,c#,vue.js,asp.net-core,asp.net-core-webapi,Javascript,C#,Vue.js,Asp.net Core,Asp.net Core Webapi,我需要能够从asp.net核心WebApi导入和呈现vue组件 我遵循这一思路,想出了下面的代码 端点确实被命中,并像我预期的那样返回打包组件字符串,但我在控制台中看到以下错误: 拒绝从“”执行脚本https://localhost:44385/api/DistributedComponent/Test'因为它的MIME类型('application/json')不可执行,并且启用了严格的MIME类型检查 及 vue.js:634[vue warn]:解析异步组件失败:函数(){return\u
export default async function externalComponent(url) {
const name = 'MyComponent';
if (window[name]) return window[name];
window[name] = new Promise((resolve, reject) => {
const script = document.createElement('script');
script.async = true;
script.addEventListener('load', () => {
resolve(window[name]);
});
script.addEventListener('error', () => {
reject(new Error(`Error loading ${url}`));
});
script.src = url;
document.head.appendChild(script);
});
return window[name];
}
控制器端点:
[HttpGet("Test")]
public string Test()
{
// This is the output of the component after running
// npx vue-cli-service build --target lib --formats umd-min --no-clean --dest server/components/MyComponent --name "MyComponent.[chunkhash]" server/components/MyComponent/MyComponent.vue
return @"(function(e,t){""object""===typeof exports&&""object""===typeof module?module.exports=t():""function""===typeof define&&define.amd?define([],t):""object""===typeof exports?exports[""MyComponent.c9b7fae39bb9d71ad3e7""]=t():e[""MyComponent.c9b7fae39bb9d71ad3e7""]=t()})(""undefined""!==typeof self?self:this,(function(){return function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){""undefined""!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:""Module""}),Object.defineProperty(e,""__esModule"",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&""object""===typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,""default"",{enumerable:!0,value:e}),2&t&&""string""!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e[""default""]}:function(){return e};return n.d(t,""a"",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="""",n(n.s=""fb15"")}({f6fd:function(e,t){(function(e){var t=""currentScript"",n=e.getElementsByTagName(""script"");t in e||Object.defineProperty(e,t,{get:function(){try{throw new Error}catch(r){var e,t=(/.*at [^\(]*\((.*):.+:.+\)$/gi.exec(r.stack)||[!1])[1];for(e in n)if(n[e].src==t||""interactive""==n[e].readyState)return n[e];return null}}})})(document)},fb15:function(e,t,n){""use strict"";var r;(n.r(t),""undefined""!==typeof window)&&(n(""f6fd""),(r=window.document.currentScript)&&(r=r.src.match(/(.+\/)[^/]+\.js(\?.*)?$/))&&(n.p=r[1]));var o=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n(""h2"",[e._v(""Hello from the Distribution Server!"")])},i=[];function f(e,t,n,r,o,i,f,u){var c,a=""function""===typeof e?e.options:e;if(t&&(a.render=t,a.staticRenderFns=n,a._compiled=!0),r&&(a.functional=!0),i&&(a._scopeId=""data-v-""+i),f?(c=function(e){e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext,e||""undefined""===typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),o&&o.call(this,e),e&&e._registeredComponents&&e._registeredComponents.add(f)},a._ssrRegister=c):o&&(c=u?function(){o.call(this,(a.functional?this.parent:this).$root.$options.shadowRoot)}:o),c)if(a.functional){a._injectStyles=c;var s=a.render;a.render=function(e,t){return c.call(t),s(e,t)}}else{var d=a.beforeCreate;a.beforeCreate=d?[].concat(d,c):[c]}return{exports:e,options:a}}var u={},c=f(u,o,i,!1,null,null,null),a=c.exports;t[""default""]=a}})[""default""]}));";
}
<template>
<MyComponent />
</template>
<script lang="ts">
import { Vue, Component, Mixins } from "vue-property-decorator";
import externalComponent from '../../js/util/external-component';
const MyComponent = () => externalComponent('https://localhost:44385/api/DistributedComponent/Test');
@Component({
name: "Dashboard",
components: {
MyComponent
}
})
export default class Dashboard extends Vue {
constructor() {
super();
}
}
</script>
主要Vue组件:
[HttpGet("Test")]
public string Test()
{
// This is the output of the component after running
// npx vue-cli-service build --target lib --formats umd-min --no-clean --dest server/components/MyComponent --name "MyComponent.[chunkhash]" server/components/MyComponent/MyComponent.vue
return @"(function(e,t){""object""===typeof exports&&""object""===typeof module?module.exports=t():""function""===typeof define&&define.amd?define([],t):""object""===typeof exports?exports[""MyComponent.c9b7fae39bb9d71ad3e7""]=t():e[""MyComponent.c9b7fae39bb9d71ad3e7""]=t()})(""undefined""!==typeof self?self:this,(function(){return function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){""undefined""!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:""Module""}),Object.defineProperty(e,""__esModule"",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&""object""===typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,""default"",{enumerable:!0,value:e}),2&t&&""string""!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e[""default""]}:function(){return e};return n.d(t,""a"",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="""",n(n.s=""fb15"")}({f6fd:function(e,t){(function(e){var t=""currentScript"",n=e.getElementsByTagName(""script"");t in e||Object.defineProperty(e,t,{get:function(){try{throw new Error}catch(r){var e,t=(/.*at [^\(]*\((.*):.+:.+\)$/gi.exec(r.stack)||[!1])[1];for(e in n)if(n[e].src==t||""interactive""==n[e].readyState)return n[e];return null}}})})(document)},fb15:function(e,t,n){""use strict"";var r;(n.r(t),""undefined""!==typeof window)&&(n(""f6fd""),(r=window.document.currentScript)&&(r=r.src.match(/(.+\/)[^/]+\.js(\?.*)?$/))&&(n.p=r[1]));var o=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n(""h2"",[e._v(""Hello from the Distribution Server!"")])},i=[];function f(e,t,n,r,o,i,f,u){var c,a=""function""===typeof e?e.options:e;if(t&&(a.render=t,a.staticRenderFns=n,a._compiled=!0),r&&(a.functional=!0),i&&(a._scopeId=""data-v-""+i),f?(c=function(e){e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext,e||""undefined""===typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),o&&o.call(this,e),e&&e._registeredComponents&&e._registeredComponents.add(f)},a._ssrRegister=c):o&&(c=u?function(){o.call(this,(a.functional?this.parent:this).$root.$options.shadowRoot)}:o),c)if(a.functional){a._injectStyles=c;var s=a.render;a.render=function(e,t){return c.call(t),s(e,t)}}else{var d=a.beforeCreate;a.beforeCreate=d?[].concat(d,c):[c]}return{exports:e,options:a}}var u={},c=f(u,o,i,!1,null,null,null),a=c.exports;t[""default""]=a}})[""default""]}));";
}
<template>
<MyComponent />
</template>
<script lang="ts">
import { Vue, Component, Mixins } from "vue-property-decorator";
import externalComponent from '../../js/util/external-component';
const MyComponent = () => externalComponent('https://localhost:44385/api/DistributedComponent/Test');
@Component({
name: "Dashboard",
components: {
MyComponent
}
})
export default class Dashboard extends Vue {
constructor() {
super();
}
}
</script>
从“Vue属性装饰器”导入{Vue,Component,Mixins};
从“..//js/util/externalComponent”导入外部组件;
常量MyComponent=()=>externalComponent('https://localhost:44385/api/DistributedComponent/Test');
@组成部分({
名称:“仪表板”,
组成部分:{
真菌成分
}
})
导出默认类仪表板扩展Vue{
构造函数(){
超级();
}
}
我通过将控制器端点更新为:
[HttpGet("Test")]
public async Task<IActionResult> Test()
{
var bytes = await System.IO.File.ReadAllBytesAsync(@"Path\To\MyComponent.c9b7fae39bb9d71ad3e7.umd.min.js");
return File(bytes, "application/javascript", "MyComponent.umd.min.js");
}
这消除了异步组件错误(在返回window[name]
我现在确实得到了一份工作
TypeError:无法读取未定义的
我为它打开了门