vue3.0 vite-config配置_you can also disable this overlay by setting serve

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import { resolve } from 'path'
import viteSvgIcons from 'vite-plugin-svg-icons'
 
import VueSetupExtend from 'vite-plugin-vue-setup-extend'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import styleImport from 'vite-plugin-style-import'
 
// https://vitejs.dev/config/
export default defineConfig({
  base: '/',
  clearScreen: false,
  server: {
    hmr: { overlay: false }, // 禁用或配置 HMR 连接 设置 server.hmr.overlay 为 false 可以禁用服务器错误遮罩层
    // 服务配置
    port: 8080, // 类型： number 指定服务器端口;
    open: false, // 类型： boolean | string在服务器启动时自动在浏览器中打开应用程序；
    cors: true, // 类型： boolean | CorsOptions 为开发服务器配置 CORS。默认启用并允许任何源
    //proxy look for https://vitejs.cn/config/#server-proxy
    proxy: {
      '/dev': {
        target: '',
        changeOrigin: true,
        rewrite: path => path.replace(/^\/dev/, '')
      }
    }
  },
 
  plugins: [
    vue({
      // refTransform: true // 开启ref转换
    }),
    vueJsx(),
    VueSetupExtend(),
    AutoImport({
      imports: [
        'vue',
        'vuex',
        'vue-router',
        {
          '@/utils/elementUI': ['messages']
        }
      ],
      resolvers: [ElementPlusResolver({ importStyle: 'sass' })],
      dts: true
    }),
    Components({
      extensions: ['vue', 'jsx'],
      dts: true,
      include: [/\.vue$/, /\.jsx$/, /\.vue\?vue/],
      resolvers: [
        ElementPlusResolver({
          importStyle: 'sass'
        })
      ]
    })
    // styleImport({
    //   libs: [
    //     {
    //       libraryName: 'vxe-table',
    //       esModule: true,
    //       resolveComponent: (name) => `vxe-table/es/${name}`,
    //       resolveStyle: (name) => `vxe-table/es/${name}/style.css`
    //     }
    //   ]
    // })
  ],
  build: {
    // minify: 'terser',
    brotliSize: false,
    // 消除打包大小超过500kb警告
    chunkSizeWarningLimit: 2000,
    //remote console.log in prod
    terserOptions: {
      //detail to look https://terser.org/docs/api-reference#compress-options
      compress: {
        drop_console: false,
        pure_funcs: ['console.log', 'console.info'],
        drop_debugger: true
      }
    },
    //build assets Separate
    assetsDir: 'static/assets',
    rollupOptions: {
      output: {
        chunkFileNames: 'static/js/[name]-[hash].js',
        entryFileNames: 'static/js/[name]-[hash].js',
        assetFileNames: 'static/[ext]/[name]-[hash].[ext]'
      }
    }
  },
  optimizeDeps: {
    include: ['element-plus/es/locale/lang/zh-cn', 'element-plus/es/locale/lang/en']
  },
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src'),
      //remove i18n waring
      'vue-i18n': 'vue-i18n/dist/vue-i18n.cjs.js'
    },
    extensions: ['.vue', '.js', '.ts', '.jsx']
  },
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@use "@/styles/element/index.scss" as *;`
      }
    }
  }
})