Vue组件基于数据库表生成动态CSS规则的实现问题

需求说明 #

我有一个名为css_rules的数据库表，包含id_type和icone_type两列，需要生成如下格式的CSS规则：

.custom-marker .[id_type] {
  background-image: url(http://example.com/[icone_type].svg);
}

原有尝试代码 #

Script部分 #

async setup(props, { emit }) {
const apiUrl = import.meta.env.VITE_APP_API_URL;
const cssRules = reactive({});

const cssText = computed(() => {
  let result = '';

  for (const key in cssRules) {
    result += `.custom-marker .${key} {`;
    const rules = cssRules[key];
    for (const property in rules) {
      result += `${property}: ${rules[property]};`;
    }
    result += '}';
  }

  return result;
});

onMounted(async () => {
  await fetch(`${apiUrl}/referentiels/lister/typesressource`, {
    method: 'GET',
    credentials: 'include',
  })
    .then((r) => r.json())
    .then((r) => {
      r.forEach((type) => {
        cssRules[type.id_type] = {
          backgroundImage: `url(http://example.com/${type.icone_type}.svg) !important`,
        };
      });
    });
});
return {
  cssText,
};

Template部分 #

<template>
  <div id="map">XXX</div>
    {{ cssText }}
    
  <style>
    {{ cssText }}
  </style>
</template>

遇到的错误 #

[plugin:vite:vue] Tags with side effect ( and ) are ignored in client component templates.

原因：Vue客户端组件模板中不允许动态插入<style>标签，这类带副作用的标签会被编译器忽略。

解决方法 #

方案1：动态创建style标签并插入到DOM #

直接通过DOM操作生成style元素并添加到页面头部，这是最直接有效的方法，还可以在组件卸载时清理元素避免内存泄漏。

修改后的Script代码：

import { onMounted, onUnmounted, ref } from 'vue';

async setup(props, { emit }) {
  const apiUrl = import.meta.env.VITE_APP_API_URL;
  const styleEl = ref(null); // 保存style元素引用，用于卸载时清理

  onMounted(async () => {
    await fetch(`${apiUrl}/referentiels/lister/typesressource`, {
      method: 'GET',
      credentials: 'include',
    })
      .then((r) => r.json())
      .then((r) => {
        let cssText = '';
        // 直接生成CSS文本
        r.forEach((type) => {
          cssText += `.custom-marker .${type.id_type} { 
            background-image: url(http://example.com/${type.icone_type}.svg) !important; 
          }`;
        });
        // 创建并插入style元素
        styleEl.value = document.createElement('style');
        styleEl.value.textContent = cssText;
        document.head.appendChild(styleEl.value);
      });
  });

  // 组件卸载时移除style元素
  onUnmounted(() => {
    if (styleEl.value && document.head.contains(styleEl.value)) {
      document.head.removeChild(styleEl.value);
    }
  });

  return {};
}

方案2：使用内联样式绑定（适合单个元素） #

如果是单个元素需要动态设置背景图，可以直接给元素绑定style属性，无需生成全局CSS：

<!-- 假设每个标记元素对应一个type对象 -->
<div class="custom-marker" :style="{ backgroundImage: `url(http://example.com/${type.icone_type}.svg)` }"></div>

此方法适合元素数量较少的场景，若需要批量应用样式，方案1更高效。

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