vue.js - Vue CLI 可以为 Vue 3 构建一个库吗?
问题描述
我想使用 Vue CLI 构建一个 Vue 库。该项目更喜欢构建库而不是完全构建的应用程序。库构建工作,但库不能与 Vue 3 结合使用。让我详细说明......
首先创建一个简单的 Vue 3 应用程序。类似命令vue create
构建的东西。然后使用以下命令构建库:
vue build App.vue -t lib
这会产生一些编译文件,其中之一是App.umd.js
. 使用 Vue 2 和以下初始化代码时,它可以正常工作。
<body>
<div id="app">
<demo></demo>
</div>
<script src="https://unpkg.com/vue@2"></script>
<script src="./dist/App.umd.js"></script>
<script>
new Vue({
components: {
demo: App
}
}).$mount('#app')
</script>
</body>
但是当使用 Vue 3 和下面的初始化代码时,会导致 JavaScript 错误。
<body>
<div id="app">
<demo></demo>
</div>
<script src="https://unpkg.com/vue@3"></script>
<script src="./dist/App.umd.js"></script>
<script>
Vue.createApp({
components: {
demo: App
}
}).mount('#app')
</script>
</body>
JavaScript 错误是:
Uncaught TypeError: Cannot read property '_c' of undefined
at Proxy.render (App.vue?19ce:1)
我假设 Vue CLI 应该能够为 Vue 3 构建一个库。这可以实现吗?
我使用@vue/cli 4.5.13,这是撰写本文时最新的版本。
解决方案
我假设您在 Vue 2 和 Vue 3 应用程序中使用相同的 Vue 2 库。因此,当您尝试在 Vue 2 应用程序中使用 Vue 2 库时,它可以工作,但是当您尝试在 Vue 3 应用程序中使用 Vue 2 库时,它不起作用?
Vue 3 与 Vue 2 不反向兼容,这就是原因。
您需要使用 Vue 3 构建您的库才能在 Vue 3 应用程序中使用它。
推荐阅读
- angular - Getting some error in while setting up Angular using cmd
- python - Django如何选择forms.Form
- rest - 如何为 PUT 和 POST 正确构建 REST 端点
- javascript - 添加工具提示而不更改 HTML
- google-maps - 居中所有标记和折线谷歌地图插件颤振适合屏幕
- angular - 如何解决 ERROR TypeError: xxx is not a function?
- java - 使用 spring 数据从 sql 数据库中读取数据失败
- flutter - 我们到底什么时候使用 async-await 呢?
- ruby - 如何把名字写成大写?
- javascript - 固定顶部但绝对底部的字母顺序