vue3+vite+tailwind+element配置,el-button被覆盖样式

生产环境下

1、vite.config.ts生产环境代码分文件夹存放

element自动导入下，解决el-button开发环境下被tailwind覆盖样式

  base: process.env.NODE_ENV === 'production' ? '/002/test/' : '/', // 此处为更改生产环境所有资源路径前缀
  build: {
    outDir: 'dist',
    assetsDir: 'assets',
    sourcemap: false,
    rollupOptions: {
      output: {
        // 最小化拆分包
        manualChunks: (id) => {
          // 按模块分
          // if (id.includes('node_modules')) {
          //   return id.toString().split('node_modules/')[1].split('/')[0].toString();
          // }
		  
	 // if (id.includes('element-plus/theme-chalk/')) { // 解决el-button开发环境下被tailwind覆盖样式，添加后会打包出一个element-plus.css
         // return 'element-plus'
         //},
        // 用于从入口点创建的块的打包输出格式[name]表示文件名,[hash]表示该文件内容hash值
        entryFileNames: 'js/[name].[hash].js',
        // 用于命名代码拆分时创建的共享块的输出命名
        chunkFileNames: 'js/[name].[hash].js',
        // 用于输出静态资源的命名，[ext]表示文件扩展名
        assetFileNames: '[ext]/[name].[hash].[ext]',
      }
    }
  }

2、tailwind 3.0 配置

/** @type {import('tailwindcss').Config} */

module.exports = {
  content: ['./index.html',"./src/**/*.{html,vue,js,ts,jsx,tsx}"], // 此处为需要使用tailwindcss的地方
  theme: {
    extend: {},
  },
  plugins: [],
}

开发环境下

3、vue3的main.ts，解决el-button开发环境下被tailwind覆盖样式

import { createApp } from 'vue';
import { createPinia } from 'pinia';

import './assets/main.css'; // 里面引入了tailwind的@tailwind base、components、utilities
// 开发环境下，tailwind 在下面导入，会影响element的button样式
// 生产环境下，tailwind 还是会覆盖el-button的样式
// 解决：https://github.com/element-plus/element-plus/issues/5693
// 有人认为解决问题的核心是把element-plus动态引入的css文件独立分离出来并放到最后载入以防止被覆盖，
// build: {
//     rollupOptions: {
//       output: {
//         // eslint-disable-next-line consistent-return
//         manualChunks(id) {
            // 有效！！！！！但这样就无法继续拆分其他css文件
//           if (id.includes('element-plus/theme-chalk/')) {
//             return 'element-plus'
//           }
//         }
//       }
//     }
//   }

import App from './App.vue';
import router from './router';


const app = createApp(App)

app.use(createPinia())
app.use(router)

app.mount('#app')