Vue3 / vite外部组件
Vue3 / vite外部组件
提问于 2020-12-30 21:22:18
似乎我在vue中加载外部umd组件时遇到了问题。
我尝试做一些类似的事情，比如
Vue 3 external component/plugin loading in runtime
这对使用vue2和webpack的我来说很有效
现在我使用的是Vue3/Vite和上面问题中相同的源码。
但是当解析外部组件promise时，我得到以下错误：
vue.js:1184 [Vue warn]: Unhandled error during execution of async component loader
at <AsyncComponentWrapper>
at <DemoComponent>
at <HelloWorld msg="Hello Vue 3.0 + Vite" >
at <App>
warn @ vue.js:1184
logError @ vue.js:1357
handleError @ vue.js:1349
onError @ vue.js:4637
(anonymous) @ vue.js:4677
Promise.catch (async)
setup @ vue.js:4676
callWithErrorHandling @ vue.js:1300
setupStatefulComponent @ vue.js:7561
setupComponent @ vue.js:7522
mountComponent @ vue.js:5264
processComponent @ vue.js:5240
patch @ vue.js:4861
mountChildren @ vue.js:5043
processFragment @ vue.js:5203
patch @ vue.js:4854
componentEffect @ vue.js:5357
reactiveEffect @ vue.js:339
effect @ vue.js:314
setupRenderEffect @ vue.js:5322
mountComponent @ vue.js:5280
processComponent @ vue.js:5240
patch @ vue.js:4861
mountChildren @ vue.js:5043
processFragment @ vue.js:5203
patch @ vue.js:4854
componentEffect @ vue.js:5357
reactiveEffect @ vue.js:339
effect @ vue.js:314
setupRenderEffect @ vue.js:5322
mountComponent @ vue.js:5280
processComponent @ vue.js:5240
patch @ vue.js:4861
mountChildren @ vue.js:5043
processFragment @ vue.js:5203
patch @ vue.js:4854
componentEffect @ vue.js:5357
reactiveEffect @ vue.js:339
effect @ vue.js:314
setupRenderEffect @ vue.js:5322
mountComponent @ vue.js:5280
processComponent @ vue.js:5240
patch @ vue.js:4861
render @ vue.js:5937
mount @ vue.js:4168
app.mount @ vue.js:9324
(anonymous) @ main.js:7
Show 16 more frames
external-component.js:11 Uncaught (in promise) TypeError: Chaining cycle detected for promise #<Promise>
at <anonymous>
at HTMLScriptElement.<anonymous> (external-component.js:11)这是promise的代码
export default async function externalComponent(url) {
const name = url.split(`/`).reverse()[0].match(/^(.*?)\.umd/)[1];
if (window[name]) return window[name];
console.log('run');
window[name] = new Promise((resolve, reject) => {
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];
}并在我的DemoComponent中使用以下代码：
<script lang="ts">
import externalComponent from '../external-component';
import { defineAsyncComponent } from 'vue'
const asyncComponent = defineAsyncComponent(
() => externalComponent(`http://localhost:8200/MyComponent/MyComponent.umd.min.js`)
)
export default {
name: 'DemoComponent',
components: {
MyComponent:asyncComponent
},
....有人能帮我一下吗？
回答 1
Stack Overflow用户
发布于 2021-11-17 08:06:12
更新：
如果从vue/dist/vue.esm-bundler导入vue并将其设置为global，则无需更改Vite配置，也无需从cdn加载vue。
import * as Vue from 'vue/dist/vue.esm-bundler';
window.Vue = Vue;在尝试上面的链接后，我得到了vue warn invalid vnode type symbol(static) (symbol)错误。
通过在Vite.config.js中添加以下配置，它可以为我工作。
// vite.config.js
import { viteExternalsPlugin } from 'vite-plugin-externals'
export default {
plugins: [
viteExternalsPlugin({
vue: 'Vue'
}),
]
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/65507664
复制相关文章
相似问题
腾讯云开发者
