在 vue 项目中如何根据条件动态加载 css 文件？

许多 vue 项目都面临着根据不同条件加载不同样式的需求，避免不必要的资源加载，提升页面性能。本文将针对如何在 vue 项目中动态引入 css 文件，并根据判断条件加载对应的 css 文件进行详细讲解。

问题描述中提到每个页面都需要重新加载 css 文件，这暗示了需要在组件内进行动态加载。直接在组件中操作 dom 虽然可以实现动态加载，但通常不推荐，因为这会增加代码复杂度，并且可能影响 vue 的响应式机制。 更好的方法是使用一个辅助函数来处理 css 的动态添加和移除。

以下代码提供了一个名为 addcustomstyle 的函数，它接收 css 代码作为参数，创建一个

/**
 * 添加样式
 * @param css
 * @returns {htmlstyleelement} 添加的样式
 */
export function addcustomstyle(css) {
  const style = document.createelement("style");
  style.appendchild(document.createtextnode(css));
  const head = document.getelementsbytagname("head")[0];
  head.appendchild(style);
  return style
}

在 vue 组件中，你可以这样使用这个函数：

    // 添加样式
    this.style = addCustomStyle(style);

   // 如果想移除添加的样式
    this.style.remove()

其中，style 变量应该包含你需要动态加载的 css 代码。 记住，你需要根据你的判断条件来决定何时调用 addcustomstyle 函数以及传入什么样的 css 代码。 例如，你可以根据 props、data 或其他状态来控制 css 的加载。 如果需要移除已加载的样式，则可以直接调用 this.style.remove() 方法。 这比直接操作 dom 更简洁、更易于维护。