解决vue-cli4+unocss0.58.9出现unocss不生效问题

起因：公司的老项目没有用unocss，页面写起来很慢取类名也很烦，所以一咬牙决定加个unocss，一加进去就发现了问题，项目第一次启动的时候unocss不生效，但是随便改了一下类名热更新后又生效，上网查了很多资料都没看到别人有这个问题。

解决：unocss.config.js 文件必须加上content 的 filesystem 和 extract 配置项

const { defineConfig, presetUno } = require('unocss');
module.exports = defineConfig({  
 content: {    
  filesystem: [      
   'src/**/*.vue', // 所有 Vue 组件      
   'src/**/*.js', // JS 文件中动态生成的类名（如 :class="`text-${size}`"）      
   'public/index.html' // HTML 中的类名    
  ],  
 },  
 extract: {    
  // 输出路径需与 Vue CLI 的 CSS 提取路径一致（避免被忽略）    
  filename: 'css/uno.[contenthash].css',    
  // 确保 Webpack 4 能识别该路径（与 vue.config.js 的 output 配合）    
  chunkFilename: 'css/uno.[contenthash].chunk.css'  
 },  
 // 预设（必选，提供基础工具类）  
 presets: [    
   presetUno(), // 类似 Tailwind 的工具类  
 ]
});

vue.config.js 文件也必须配置 css 的 extract 跟 unocss.config.js 的配置对应上

module.exports = {    
 publicPath: '/', // 部署应用包时的基本 URL    
 outputDir: 'dist', // 构建文件的目录    
 assetsDir: 'static', // 构建文件的目录 静态资源    
 configureWebpack: {        
  plugins: [            
   UnoCSS()        
  ] 
 },    
 // css相关配置    
 css: {        
  extract: {            
   filename: 'css/[name].[contenthash].css', // 与 UnoCSS 输出路径对齐            
   chunkFilename: 'css/[name].[contenthash].chunk.css'        
  }    
 }
}

总结：我也不知道具体是原理，总之能解决unocss不生效的问题就行，不枉我搜索了两天 o(╥﹏╥)o

有知道具体原因的可以在评论区留言，一起讨论一下。