构建 Web 组件时如何解决“您正在开发模式下运行 Vue”？答案

【问题标题】：How can I fix "You are running Vue in development mode" when building a Web Component?构建 Web 组件时如何解决“您正在开发模式下运行 Vue”？
【发布时间】：2020-06-16 05:41:44
【问题描述】：

我正在使用 VueJS 构建一个 Web 组件，除了一些带有基本示例的博客之外，很难在网上找到文档，使用我在 CLI 帮助屏幕中找到的以下命令：

vue-cli-service build --mode production --target wc --name creador-publico src/views/CreadorPublico.vue

（我强制模式进入生产，即使它应该默认为生产）

...但无论我做什么，我都会得到：

该命令创建了一个 HTML 文件和 2 个 JS，一个缩小了一个没有，我已经尝试了它们并得到了相同的结果。

我很想为 Vue Web 组件找到好的文档，但它似乎不存在。

【问题讨论】：

您如何准确地运行构建的应用程序？比如，如果你将这个组件导入到一个 Vue 应用程序中并在生产、非开发模式下运行该应用程序，你会得到同样的错误吗？我问是因为vue-cli-service serve 默认在开发模式下运行应用程序。你可以指定mode到vue-cli-service servecli.vuejs.org/guide/cli-service.html#vue-cli-service-serve
我想把这个组件放到一个普通的网站上，我只会在
您正在构建组件，我认为问题在于您如何“运行”该组件。这就是为什么我试图澄清您正在采取哪些步骤来运行包含此组件的应用程序。
生成的 HTML 包括来自 unpkg 的 Vue，Vue 的实例化是在组件内部完成的，我想使用“--mode production”参数应该足以将该实例化设置为 prod 模式，应该'是吗？

标签： javascript vue.js web-component shadow-dom

【解决方案1】：

消息的出现取决于您在页面中包含 Vue 的方式，而不是因为 Web 组件本身的任何内容。

当您使用 --target wc 选项构建 Web 组件时，它会创建一个示例 demo.html 文件，如下所示：

<script src="https://unpkg.com/vue"></script>
<script src="path/to/my-element.js"></script>

<!-- use in plain HTML, or in any other framework -->
<my-element></my-element>

https://unpkg.com/vue 指向 Vue 的开发版本。

将此行更改为指向 Vue 的缩小版本将从控制台中删除此消息，例如：

https://unpkg.com/browse/vue@2.6.12/dist/vue.min.js

【讨论】：

【解决方案2】：

在初始 new Vue 实例化之前使用 Vue.config.productionTip = false;。

【讨论】：

我应该在哪里做，因为我没有直接访问 Vue 实例化的权限？