如何将VueJS UMD构建安装到现有HTML上？

Question

我一直在尝试从我们的主应用程序中提取几个小组件，以便在目标网页上使用，但是运气不高！

我在DOM中已有一些HTML，例如：

<div id="app">
 <h1>Demo Feature #1</h1>
 <demo-component />
</div>

我有以下条目文件，marketing.ts：

import Vue from "vue";
import Demo from "Demo.vue";

new Vue({
 el: 'app',
  components: {
    'demo-component': Demo,
  }
});

当输出构建在站点上运行时，DOM最终看起来像这样：

<!--function (a, b, c, d) { return createElement(vm, a, b, c, d, true); }-->

我希望将自定义HTML标签替换为我的Vue组件。

docs状态应该是这种情况：

[如果既不提供渲染功能也不提供模板选项，则将安装DOM元素的in-DOM HTML提取为模板。在这种情况下，应使用Vue的Runtime + Compiler构建。

此外，文档继续到state：

[使用vue-loader或vueify时，*。vue文件中的模板会在构建时预先编译到JavaScript中。您实际上并不需要最终捆绑包中的编译器，因此可以使用仅运行时版本。

在这种情况下，我正在使用VueCLI（与Vue Loader一起构建我的输出，从上面的理解，我认为这是仅限运行时的构建。

该组件在整个应用程序中都可以正常工作。我可以看到的明显现象是缺少render。当我使用它时，它将用提供的整个组件替换DOM，并丢失其中已经存在的内容。

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

---

更多详细信息：

• 使用构建命令vue-cli-service build --target lib --inline-vue --dest dist/lib/marketing --name marketing src/marketing.ts --no-clean
• 使用VueCLI 4.2.2
• 使用TypeScript和Vue类组件

Answer 1

我做的方法是...

1）将组件包装在js文件中

import MyWidgit from './MyWidgit.vue';

// eslint-disable-next-line import/prefer-default-export
export const mount = (el, props) =>
  new window.Vue({
    el,
    render: h => h(Filter, {props})
  });

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

{
    input: `./src/${widgetName}/${widgetName}.js`, // Path relative to package.json
    output: {
      format: 'umd',
      name: widgetName,
      file: `./dist/${widgetName}.js`,
      exports: 'named',
      external: ['vue'],
      globals: {
        vue: 'Vue',
      },
    },
    //... etc
}

3）添加到html

<!-- load widget code -->
<script src="/dist/mywidgit.js"></script>

<!-- create a div to for mounting the mywidgit widget -->
<div id="widget1"></div>

<!-- mount a new instance of the mywidgit widget -->
<script>
  mywidgit.mount('#widget1', {
    msg: 'all is well',
  });
</script>