时间戳

首页 > 解决方案 > 如何将 VueJS 3 Hello World 应用程序作为库提供？

vue.js - 如何将 VueJS 3 Hello World 应用程序作为库提供？

问题描述

我在用着：

使用 CLI，我设置了“hello world”应用程序并尝试使用以下lib目标构建它：

npx vue-cli-service build --target lib --name helloworld ./src/components/HelloWorld.vue --mode production

构建工作正常并在./dist目录中生成内容。从常规 HTTP 服务器访问它，我希望 demo.html 文件能够正确呈现组件，但事实并非如此。 抛出一个 JS 错误：

Uncaught ReferenceError: vue is not defined

控制台警告 Vue 正在开发模式下运行，但 CLI 默认应该处于生产模式。我错过了什么吗？

我是第一次尝试 VueJS，并尝试了解如何从组件中生成一个库，然后可以在其他项目中使用。

标签： vue.jsvuejs3

解决方案

Vue CLI 4.5.13 不会创建与 Vue 3 兼容的演示。例如，4.5.13 版本仍然使用 Vue 2 初始化demo.html。版本 5.x修复了这个问题。

安装@vue/cli5.x 来创建 Vue 3 库（@next目前是5.0.0-beta.3）：

npm i -g @vue/cli@next

控制台警告 Vue 正在开发模式下运行，但 CLI 默认应该处于生产模式。我错过了什么吗？

默认情况下，库构建外部化vue（它不与库捆绑）。相反，demo.html从 CDN 中提取它：

<script src="https://unpkg.com/vue"></script>

这解决了https://unpkg.com/vue@2.6.14/dist/vue.js（截至今天的最新版本），这是一个开发版本。如果您更喜欢生产版本，请将srcURL 更改为缩小版本：

<script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script>

推荐阅读