如何在没有WebPack构建过程的HTML页面中使用VueJS .vue组件？ [英] How to use a VueJS .vue component in a HTML page without a WebPack build process?

问题描述

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

I am creating a page for a legacy server rendered project.

在其中一个页面上我需要添加一些动态。然后我导入vuejs CDN脚本并创建一个内联vue对象

On one of its page I need to add some "dynamic". Then i import the vuejs CDN script and created a inline vue object

var v = new Vue(... 

但是有一个。vue组件，我想将它添加到页面中。但似乎这个组件只能通过WebPack导入和构建过程添加。

But there is a .vue component that I like very much and I would like to add it to the page. But it seems that this component can only be added by a WebPack import and build process.

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

How can I use this component in my html page without WebPack build process? Is that possible?

推荐答案

您可以按照 poi / poi-js / bundle-and-publish-your-vue-componet-like-a-pro-9ce27f9b5f65rel =nofollow noreferrer>这篇文章：

You can use poi as described in this article:

poi build Component.vue --format cjs

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

You can also use vue-cli 3 (beta) and the necessary global addon:

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）的生产缩小代码。

Use vue build --help to get options and the help text. But be aware that this generates production minified code with an app and vendor bundle (which includes vue).

另请参阅这个旧的答案提到了类似的问题，提到了之前的使用 build 命令在 vue-cli 2.8.x

See also this old answer to a similar question, mentioning the use of the previous build command in vue-cli 2.8.x

这篇关于如何在没有WebPack构建过程的HTML页面中使用VueJS .vue组件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！