Vue 3 处理根元素内的脚本标签答案

【问题标题】：Vue 3 handling script tag inside root elementVue 3 处理根元素内的脚本标签
【发布时间】：2021-07-15 17:18:51
【问题描述】：

我试图避免 Vue 在根元素内编译脚本标记。这是一个代码示例：

<body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.0.5/vue.global.js"></script>
  <script>const app = Vue.createApp({});</script>
  <script type="application/javascript" src="global_component_bundled.js"></script>
  <div id="app">
    <script type="application/javascript" src="myJsFile.js"></script>
    <global-component></global-component>
  </div>
  <script>app.mount("#app");</script>
</body>

我试图做这样的事情：

<script>app.config.isCustomElement = tag => tag.startsWith('script');</script>

但不幸的是，这对于脚本标签不起作用。

问题是我在浏览器控制台上收到的警告。也许有什么方法可以禁用脚本标签的警告或禁用 Vue 编译这个标签？

我知道我可以这样做：

<script>app.config.warnHandler = () => null;</script>

但如果 vue 无法忽略编译脚本标记，我只想禁用此警告：

模板编译错误：客户端组件模板中忽略具有副作用的标签（脚本和样式）。

但我更喜欢忽略脚本标签而不是禁用警告的方法。

【问题讨论】：

标签： vue.js vuejs3

【解决方案1】：

我设法通过在所有<script> 标签中使用type="application/javascript" 来消除警告。

【讨论】：

这适用于 Vue 2，但我的问题是关于 Vue 3，如果您查看我的代码，您会发现我已经在使用 type="application/javascript"