如何在没有 WebPack 构建过程的 HTML 页面中使用 VueJS .vue 组件？

Question

我正在为旧版服务器渲染项目创建一个页面。

在它的一个页面上，我需要添加一些“动态”。然后我导入 vuejs CDN 脚本并创建了一个内联 vue 对象

var v = new Vue(... 

但是有一个我非常喜欢的.vue component，我想将它添加到页面中。但是好像这个组件只能通过WebPack导入构建过程来添加。

如何在没有 WebPack 构建过程的情况下在我的 html 页面中使用此组件？这可能吗？

Answer 1

您可以按照this article 中的说明使用poi：

poi build Component.vue --format cjs

您还可以使用vue-cli 3（测试版）和必要的全局插件：

npm install -g @vue/cli
npm install -g @vue/cli-service-global
# or
yarn global add @vue/cli
yarn global add @vue/cli-service-global

vue build Component.vue

使用vue build --help 获取选项和帮助文本。 但请注意，这会生成带有应用程序和供应商捆绑包（包括 vue）的生产缩小代码。

另见this old answer 到类似问题，提到在vue-cli 2.8.x 中使用先前的build 命令