Vite

官网https://vitejs.dev/open in new window

yarn2非yarn的版本是2.x也可能你yarn set version berry是3.x版本 原本是想做个vite2 + ts + vue3 + tailwindcss + yarn2写的，但是ts类型推断真的太烦了，还有yarn2的代理

vite实战

下方是 vite+vue+js+tailwindcss+自动导入的实现配置

使用的库

• @iconify/json 图标集合配合unplugin-icons使用 Material Design Icons(预览icon的):

  • https://fonts.google.com/icons?selected=Material+Icons:assignment_returnopen in new window

  • https://icon-sets.iconify.design/open in new window

  <!-- icon的使用 -->
  <i-mdi-account class="text-xl items-center text-primary" />
  

• unplugin-icons 按需导入图标，随用随取（只在打包阶段将使用到的打包进项目中）

• unplugin-auto-import 自动导入像vue的方法 比如ref不再需要导入可以在script使用ref()

• unplugin-vue-components 组件自动注册

• tailwindcss(3.0) 我很喜欢 just in runtime，其实采用windcss也可以替代，windcss参与者也有@antfuopen in new window

只想说@antfuopen in new window大神yyds

vite.config.js

// vite.config.js
import { defineConfig } from "vite";
import path from 'path'
import vue from "@vitejs/plugin-vue";
import AutoImport from "unplugin-auto-import/vite";
import IconsResolver from "unplugin-icons/resolver";
import Icons from "unplugin-icons/vite";
import Components from "unplugin-vue-components/vite";
import { ElementPlusResolver } from "unplugin-vue-components/resolvers";

export default defineConfig({
  resolve: {
    // 路径别名
    alias: {
      '~/': `${path.resolve(__dirname, 'src')}/`,
    },
  },
  css: {
    // 给scss文件注入这段代码
    preprocessorOptions: {
      scss: {
        additionalData: `@use "~/assets/css/element/index.scss" as *;`,
      },
    },
  },
  plugins: [
    vue(),
    AutoImport({
      imports: ["vue", "vue-router"],
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      dirs: ["src/components"],
      // 下方的示例为导入elementPlus的组件库（导入scss非导入css） + icon组件库
      resolvers: [ElementPlusResolver({importStyle: 'sass'}), IconsResolver()],
    }),
    Icons({
      // 这个地方是默认配置，写不写无所谓的吧
      autoInstall: true,
    })
  ],
});

vite打包的问题

在tailwindcss在配合按需导入组件库发生冲突（button的背景色冲突）

• 类名选择器与属性选择器[type=button]是同权重，在tailwindcss导入在按需组件的后边的情况下导致button样式异常

  解决方案： 在vite的配置文件中，修改rollup的manualChunks

  // 举例 vant
  build: {
    rollupOptions: {
      output: {
        manualChunks(id) {
          if (id.includes("/src/tailwindcss.css")) {
            return "tailwind";
          }
          if (id.includes("/node_modules/vant/es/")) {
            if(id.includes('.less')){
              return "vant-css";
            }
          }
        }
      }
    }
  }