Vue 3 出现"tags with side effects"警告导致生产环境页面崩溃如何解决？

1. 模板编译阶段过滤非法标签（优先推荐） #

你可以通过配置Vue的编译选项，在编译阶段直接忽略/移除模板中的<script>和<style>标签，从根源避免报错：

• 如果你使用Vite构建，修改vite.config.js中的Vue插件配置：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [
    vue({
      template: {
        compilerOptions: {
          // 自定义节点转换逻辑，移除所有script和style标签
          nodeTransforms: [node => {
            if (node.tag === 'script' || node.tag === 'style') {
              return null
            }
          }]
        }
      }
    })
  ]
})

• 如果你使用的是带运行时编译器的Vue版本（Runtime + Compiler），可以在初始化应用时全局配置：

import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)
app.config.compilerOptions.nodeTransforms = [node => {
  if (node.tag === 'script' || node.tag === 'style') return null
}]
app.mount('#app')

2. 使用v-html渲染CMS动态内容 #

如果含有<script>的内容是Shopify输出的动态CMS片段，不要把这部分内容直接写在Vue模板中，改为用v-html挂载：

<template>
  <!-- 把CMS输出的整段内容通过v-html渲染，不会被Vue模板编译器处理 -->
  <div v-html="shopifyDynamicContent" />
</template>
<script setup>
// 这里是从接口或者HTML中拿到的Shopify动态输出的内容字符串
const shopifyDynamicContent = 'xxx'
</script>

注：v-html中的内容不会经过Vue模板编译，所以里面的script/style标签会按照浏览器原生规则处理，不会触发Vue的编译错误

3. 全局错误兜底避免全站崩溃 #

如果上述改造无法覆盖所有场景，可以配置全局错误捕获逻辑，就算部分组件报错也不会导致整个应用白屏：

const app = createApp(App)
// 全局错误处理器
app.config.errorHandler = (err, instance, info) => {
  console.error('组件渲染错误', err, info)
  // 这里可以加自定义的错误上报逻辑，不会触发全应用崩溃
}

同时可以给容易出问题的页面组件加<Suspense>和错误兜底，或者用errorCaptured生命周期捕获组件内部错误，自定义fallback展示内容。

4. 调整挂载节点避免冲突 #

如果<script>标签是Shopify直接插入到你Vue应用的挂载节点内部的，可以单独给Vue应用新建一个干净的空节点作为挂载目标，和Shopify输出内容的节点隔离开，从根源避免把CMS插入的标签带入Vue模板编译流程。

内容的提问来源于stack exchange，提问作者Sky