gpt4 book ai didi

javascript - 运行时动态加载Vue单文件组件

转载 作者:行者123 更新时间:2023-12-04 11:57:22 25 4
gpt4 key购买 nike

我们有一个 Vue 应用程序,并希望允许第三方创建插件。我们希望插件以 Vue 单文件组件的形式构建。
在运行时,最终用户会选择一个插件添加到应用程序中。该应用程序将获取纯文本 .vue 文件,即时编译它,并将其显示在应用程序中。
Vue 支持 dynamic and async components ,但这些要提前编译到应用程序中。我们想做同样的事情,除了动态加载代码。
我怎样才能使这项工作?
这是我到目前为止所得到的:

<template>
<div>
The component goes here:
<component :is="pluginComponent"></component>
</div>
</template>
<script>
import { parseComponent } from "vue-template-compiler";
export default {
data() {
return {
pluginComponent: null
};
},
mounted() {
// fetch code from some external source here
let code = "<template><div>hello</div></template>";
let comp = parseComponent(code);
this.pluginComponent = comp;
}
};
</script>
(我修改了构建,因此存在 vue-template-compiler。)
上面的代码会产生这个错误:
[Vue warn]: invalid template option:[object Object]
found in
---> <Anonymous>
<Pages/plugin/PluginId.vue> at pages/plugin/_plugin_id.vue
<Nuxt>
<Layouts/default.vue> at layouts/default.vue
<Root> instrument.js:110
instrumentConsole instrument.js:110
VueJS 15
TypeError: "vnode is null"
VueJS 14
instrument.js:110
我猜 parseComponent() 产生的不是 <component>在寻找。

最佳答案

I'm guessing that whatever parseComponent() produces isn't what <component> is looking for


我会说是的,因为它似乎无法编译为任何 render功能。
docs 中所述, vue-template-compiler用于运行时编译。在大多数情况下,您应该将它与 vue-loader 一起使用。 .

How can I make this work?


您可能想使用 Vue.compile 因为它允许您将模板字符串编译成 render功能;然后您可以将其绑定(bind)到异步或动态组件的对象。
但是请注意,这是 仅在完整版本中可用 ,这比仅运行时的构建版本重大约 30%。阅读更多 Runtime + Compiler vs. Runtime-only .
考虑到这一点,由于您没有在问题中提及您正在使用哪个捆绑程序,我将假设 Webpack 带有 Vue-CLI,以下是您如何配置 vue别名(作为导入时的引用点)。
验证你设置的 Vue“别名”
在您的控制台中(从项目的根目录),运行:
vue inspect resolve.alias.vue$
如果这导致出现“vue/dist/vue.runtime.esm.js”(默认情况下应该是),那么很明显我们需要更改这部分。
配置它
现在,由于内部 webpack 配置是使用 webpack-chain 维护的,我们将像这样配置/重置别名:
module.exports = {
chainWebpack: config => {
config.resolve.alias
.set('vue$', 'vue/dist/vue.esm.js')
}
}
查看 explanation of different builds .
使用它
此时,您需要做的就是将“动态”模板传递给 compile函数,不包括 <template>标记虽然。
import Vue from 'vue';

export default {
mounted() {
// fetch code from some external source here
let code = '<div>hello</div>';
let comp = Vue.compile(code);

this.pluginComponent = comp;
}
}
<template>
<div>
The component goes here:
<component :is="pluginComponent"></component>
</div>
</template>

关于javascript - 运行时动态加载Vue单文件组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62035019/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com