Vue 3 警告“带有副作用的标签”正在破坏生产

Posted 2023-02-24

技术标签:

【中文标题】Vue 3 警告“带有副作用的标签”正在破坏生产【英文标题】：Vue 3 warning "tags with side effects" is breaking Production 【发布时间】：2021-12-13 05:07:02 【问题描述】：

我最近从 Vue 2 升级到了 Vue 3，我的应用中有几个部分在 development 模式下会发出警告：

[Vue warn]: Template compilation error: Tags with side effect (<script> and <style>) are ignored in client component templates.

在 Vue 2 中，这些警告只是隐藏在 production 中。但是，在 Vue 3 中，带有这些警告的页面会完全中断，并且屏幕会变为空白。它们在development 中运行良好。

删除所有这些 <script> 标记对我来说是不切实际的，因为它们是由我的 CMS (Shopify) 动态插入的。

我有什么办法可以在生产中发现这些错误，以免他们关闭我的网站？

【问题讨论】：

请看here。您能否提供插入这些脚本的 html 标记或组件？以及它在插入之前和之后的样子。 【参考方案1】：

到目前为止，这是我找到的最佳解决方案。

替换：

<script>
  // JS CODE HERE
</script>

与：

<component :is="'script'">
  // JS Here
</component>

但是，我更喜欢全局设置，这样我就不必为每个插件都这样做。现在我的应用感觉很脆弱，以防我团队中的任何人添加另一个 CMS 插件。

我不希望应用程序在遇到 <script> 标记时立即崩溃...

【讨论】：

【参考方案2】：

这有点晚了，但同样的事情发生在我身上，我想我有解决办法。至少在我的情况下。

您必须在 index.html 中的结束正文标记之前嵌入脚本。问题是（我想）你把它放在主 div 里面。

应该是这样的：

<body>
  <div id="app">
    
  </div>
  <script src="./main.js"></script>
</body>

【讨论】：

以上是关于Vue 3 警告“带有副作用的标签”正在破坏生产的主要内容，如果未能解决你的问题，请参考以下文章