升级Vite至4.x后Vue3项目生产环境部分样式丢失求助

问题根源 #

Vite 4对生产环境的CSS Tree Shaking策略做了升级，会更严格地识别“未被使用”的样式并剔除。你的组件中，.inline-svg.h22 svg这个选择器依赖动态传入的h22类（通过state变量绑定），Vite的静态分析无法识别这种动态生成的类名关联，导致把这段样式误判为无用代码，在生产构建时被移除。开发环境Vite不会启用激进的Tree Shaking，所以样式表现正常。

可行解决方案 #

• 局部禁用该样式的Tree Shaking
  在样式块前添加注释，明确告诉Vite不要处理这段样式的Tree Shaking：

  <style lang="scss">
  /* vite-disable-css-tree-shaking */
  .inline-svg.h22 svg {
    height: 22px;
    width: 22px;
  }
  </style>
  

• 优化类名绑定写法，帮助静态分析识别
  把模板中的动态类名从模板字符串改成数组显式绑定，让Vite能识别到h22类的存在：

  <template>
    <div :class="['inline-svg', state]" :style="divStyle" v-html="icon"></div>
  </template>
  

• 调整Vite配置（全局方案，谨慎使用）
  如果多个组件都存在类似问题，可以全局调整CSS的Tree Shaking策略，但会导致打包体积增大，仅建议在必要时使用：

  // vite.config.js
  import { defineConfig } from 'vite'
  import vue from '@vitejs/plugin-vue'
  
  export default defineConfig({
    plugins: [vue()],
    css: {
      treeShaking: false // 关闭全局CSS Tree Shaking
    }
  })
  

• 迁移样式至全局CSS文件
  将这段非Scoped样式移动到项目的全局CSS文件（比如src/styles/global.scss）中，全局CSS默认不会被Tree Shaking处理，能确保样式生效。

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