首页 > 解决方案 > 为“unpkg”构建一个 Vue 组件

问题描述

我想在 unpkg.com 上发布我的组件。实际上它在那里,但不起作用。我尝试使用与我的 npm 构建相同的构建 (umd),但我认为我需要一个特定的构建用于 unpkg。以下是我package.json现在的相关部分:

  ...
  "main": "dist/vuePolar.umd.js",
  "unpkg": "dist/vuePolar.umd.min.js",
  "scripts": {
    "package": "vue-cli-service build --target lib --name vuePolar src/components/Polar.vue",
    ...
  }

我怀疑我需要构建一个 IIFE 而不是 UMD 文件,但我的 dist 文件夹中没有类似的东西:

demo.html
vuePolar.common.js
vuePolar.common.js.map
vuePolar.umd.js
vuePolar.umd.js.map
vuePolar.umd.min.js
vuePolar.umd.min.js.map

知道如何获得适用于 unkpg 的构建吗?

标签: javascriptvue.jsnpmbuildcomponents

解决方案


实际上,可以将您的组件发布为 UMD。我必须在 Vue 实例中注册我的组件,如下所示:

<div id="app">
    <polar :item="3">hoi</polar>
</div>

<script>
    var app = new Vue({
        el: '#app',
        components: { polar: vuePolar},
    })
</script>

现在它起作用了。我对不需要注册组件的示例感到困惑。


推荐阅读