hongze_fsms_web/vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from "path"
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import ElementPlus from "unplugin-element-plus/vite"
import {createSvgIconsPlugin} from 'vite-plugin-svg-icons'
// import vitePluginImagemin from 'vite-plugin-imagemin'

// Element-plus 图标按需引入和自动引入
// import Icons from "unplugin-icons/vite"
// import IconsResolver from "unplugin-icons/resolver"

const pathSrc = path.resolve(__dirname, 'src')

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    // 自动导入
    AutoImport({
      imports:['vue'],
      resolvers: [
        ElementPlusResolver(),
        // IconsResolver({
        //   prefix: "Icon",
        // }),
      ],
      dts: path.resolve(pathSrc, "auto-imports.d.ts")
    }),
    // Element-plus 按需引入
    Components({
      resolvers: [
        ElementPlusResolver(),
        // IconsResolver({
        //   enabledCollections: ["ep"],
        // })
      ],
      dts: path.resolve(pathSrc, "components.d.ts"),
    }),
    // Icons({
    //   autoInstall: true,
    // }),
    // 样式问题
    ElementPlus({
      importStyle: "sass",
      useSource: true
    }),
    // //图片压缩
    // vitePluginImagemin({
    //   gifsicle: {
    //     optimizationLevel: 7,
    //     interlaced: false
    //   }
    // }),
    createSvgIconsPlugin({
      // 指定需要缓存的图标文件夹
      iconDirs: [path.resolve(process.cwd(), 'src/assets/svg-icons')],
      // 指定symbolId格式
      symbolId: 'svgIcon-[dir]-[name]',
      /**
       * 自定义插入位置
       * @default: body-last
       */
      // inject?: 'body-last' | 'body-first'

      /**
       * custom dom id
       * @default: __svg__icons__dom__
       */
      // customDomId: '__svg__icons__dom__'
    })
  ],
  resolve:{
    alias:{
      "@":path.resolve(__dirname,"./src")
    }
  },
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@use "@/styles/element.scss" as *; @use "@/styles/theme.scss" as *;`
      }
    }
  },
  server:{
    host:true
  },
  build:{
    outDir: 'hongze_fsms_web',
    minify:'terser',
    terserOptions:{
      compress:{
        drop_console:true,
        drop_debugger:true
      },
      output:{
        comments:true
      }
    },
    rollupOptions:{
      output:{
        manualChunks(id){
          if(id.includes('node_modules')){
            if(id.includes('element-plus')){
              // element-plus 单独打包
              return id.toString().split('node_modules/')[1].split('/')[0].toString()
            }
            // tinymce富文本编辑器单独打包
            if(id.includes('tinymce')){
              // tinymce富文本的themes比较大，单独打包成一个js
              if(id.toString().split('node_modules/')[1].split('/')[1]=='themes'){ 
                return id.toString().split('node_modules/')[1].split('/')[0].toString()+'-'+id.toString().split('node_modules/')[1].split('/')[1].toString()
              }else{
                return id.toString().split('node_modules/')[1].split('/')[0].toString()
              }
              
            }
          }
        },
        chunkFileNames:'assets/js/[name]-[hash].js',
        entryFileNames:'assets/js/[name]-[hash].js',
        assetFileNames:(file)=>{
          if(file.name.endsWith('.css')){
            return 'assets/css/[name]-[hash].css'
          }else{
            return 'assets/media/[name]-[hash].[ext]'
          }
        }
      }
    }
  }
})