Vue.js 如何将VueJS UMD构建装载到现有HTML上？

我一直在尝试从我们的主应用程序中提取一些小组件用于登录页面，但运气不太好

我在DOM中有一些现有的HTML，比如：

演示功能#1

我有以下输入文件，

marketing.ts

：

从“Vue”导入Vue；
从“Demo.vue”导入演示；
新Vue({
el:“应用程序”，
组成部分：{
“演示组件”：演示，
}
});

当输出构建在站点上运行时，DOM的最终外观如下所示：

我希望用我的Vue组件替换自定义HTML标记

缔约国应在这种情况下：

如果既不存在呈现函数也不存在模板选项，则装载DOM元素的in-DOM HTML将被提取为模板。在这种情况下，应使用Vue的运行时+编译器版本

此外，这些文件还包括：

使用vue loader或vueify时，*.vue文件中的模板在构建时预编译为JavaScript。您实际上不需要最终捆绑包中的编译器，因此可以只使用运行时构建

在本例中，我使用VueCLI（带有Vue加载程序）来构建我的输出，从上面我了解到这是一个仅在运行时构建的输出

该组件在完整应用程序中工作良好。我能看到的最明显的事情是缺少

渲染

。当我使用它时，它会用提供的整个组件替换DOM，并丢失其中已有的组件

是否可以通过lib构建提取多个组件并在现有DOM中呈现它们？

---

进一步详情：

• 使用build命令

  vue cli服务build--target lib--inline vue--dest dist/lib/marketing--name marketing src/marketing.ts--no clean

• 使用VueCLI 4.2.2
• 使用TypeScript和Vue类组件
• 这个节目是有可能做到的

---

我的做法是
1） 在js文件中包装我的组件

从“./MyWidgit.vue”导入MyWidgit；
//eslint禁用下一行导入/首选默认导出
导出常量挂载=（el，道具）=>
新窗口({
埃尔，
render:h=>h（过滤器，{props}）
});

2） 使用rollup生成代码（我认为它更适合生成库）

{
输入：`./src/${widgetName}/${widgetName}.js`，//相对于package.json的路径
输出：{
格式：“umd”，
姓名：widgetName，
文件：`./dist/${widgetName}.js`，
导出：'命名'，
外部：['vue']，//要求单独加载vuejs库
全球：{
vue:“vue”，
},
},
//…等等
}

3） 添加到html

mywidget.mount（“#widget1”{
味精：“一切都好”，
});

为了解决这个问题，我从CLI构建中删除了

--inline vue

参数，并通过CDN添加了vue.JS，即

---

我相信这应该在单个库中工作，因此这可能是构建工具的一个问题。
感谢您的回答。不幸的是，这种方法不能很好地适应我们的需要，因为我们将有多个组件-每个组件的ID都将变得很难处理。这种方法曾用于一个项目，其中有多个（10+）小部件同时捆绑在一起。汇总配置是由一个函数生成的，我在该函数中传递

widgetName

。在我的例子中，我已经手动传递了名称（因为它允许轻松跳过文件），但是您也可以有一个脚本在文件夹中迭代。我想说它的伸缩性非常好，我认为与webpack相比，

rollup

是发布这样一组组件的首选方式。这是如何处理的：

mywidgit.mount（'widget1'，{msg:'all is well'，}）在你的HTML中？您是否在HTML中使用汇总？这就是我不确定的，也就是说，你需要按照页面上使用的ID来写吗？对不起，我不熟悉这个工具，所以这可能就是问题所在。好的，我明白了。我需要单独做。设置是为了一个“小部件”库，其中一个或两个（多个）将在一个页面上使用。但听起来你不是这么想的。我想我误解了你的意图啊是的，对不起，不清楚。我们更多地是在传统意义上使用它，我们的应用程序的一些部分通过CMS被拉到我们的营销网站上。我将把这作为一个答案来帮助其他人，但我认为这不是正确的方法。