使用 vue-cli 3 将 vue 依赖项捆绑到 Web 组件构建中
Bundle the vue dependency into a web component build using vue-cli 3
我正在使用 vue-cli 3 将我的 vue 组件捆绑到 Web 组件中,使用类似这样的命令:
package.json
"build:wc": "vue-cli-service build --target wc-async --name webcomponent-global 'src/components/*/*.vue'"
一切正常,但是根据 docs 您需要一个全局 vue 依赖项才能使其正常工作,因为 vue 运行时被排除在构建之外:
Note the bundle relies on Vue being globally available on the page.
这迫使我使用两个脚本标签包含 Web 组件,如下所示:
<script src="https://unpkg.com/vue"></script>
<script src="path/to/my-element.js"></script>
<!-- use in plain HTML, or in any other framework -->
<my-element></my-element>
有什么方法可以告诉 vue-cli 将 vue 依赖项包含到 web 组件包本身中,这样只需要包含一个脚本就可以使 web 组件正常工作。
您可以通过传递 --inline-vue 标志来内联 Vue,如此处所述:
https://cli.vuejs.org/guide/build-targets.html#web-component
我正在使用 vue-cli 3 将我的 vue 组件捆绑到 Web 组件中,使用类似这样的命令:
package.json
"build:wc": "vue-cli-service build --target wc-async --name webcomponent-global 'src/components/*/*.vue'"
一切正常,但是根据 docs 您需要一个全局 vue 依赖项才能使其正常工作,因为 vue 运行时被排除在构建之外:
Note the bundle relies on Vue being globally available on the page.
这迫使我使用两个脚本标签包含 Web 组件,如下所示:
<script src="https://unpkg.com/vue"></script>
<script src="path/to/my-element.js"></script>
<!-- use in plain HTML, or in any other framework -->
<my-element></my-element>
有什么方法可以告诉 vue-cli 将 vue 依赖项包含到 web 组件包本身中,这样只需要包含一个脚本就可以使 web 组件正常工作。
您可以通过传递 --inline-vue 标志来内联 Vue,如此处所述: https://cli.vuejs.org/guide/build-targets.html#web-component