【问题标题】:How to serve VueJS 3 Hello World application as a lib?如何将 VueJS 3 Hello World 应用程序作为库提供?
【发布时间】:2021-10-13 10:21:10
【问题描述】:

我正在使用:

  • NodeJS:16.6.1
  • VueJS:3.0.0
  • Vue CLI:4.15.13

使用 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.js vuejs3


    【解决方案1】:

    Vue CLI 4.5.13 不会创建与 Vue 3 兼容的演示。例如,version 4.5.13 still uses Vue 2 initialization in demo.html。版本 5.x fixes this

    安装 @vue/cli 5.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(截至今天的最新版本),这是一个开发版本。如果您更喜欢生产版本,请将src URL 更改为缩小版本:

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

    【讨论】:

    • 使用正确的 Vue CLI 版本确实解决了我遇到的问题(包的名称是 @vue/cli@next)。对于 vue 3 的生产版本,我使用了:&lt;script src="https://unpkg.com/vue@3.2.1/dist/vue.global.prod.js"&gt;&lt;/script&gt;。感谢您的帮助。
    • 我为 Vue CLI 文档创建了一个 PR 来提及这一点。 github.com/vuejs/vue-cli/pull/6630 从文档中阅读它就知道了这一点,首先会避免这个问题。再次感谢 @tony19 的帮助。
    猜你喜欢
    • 2015-10-16
    • 2014-05-20
    • 2013-01-20
    • 1970-01-01
    • 2013-01-24
    • 2014-08-26
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多