在vite.config.js文件中的plugins中配置

静态资源的打包处理

...
  build: {
    rollupOptions: {
      output: {
        // 静态资源打包做处理
        chunkFileNames: 'static/js/[name]-[hash].js',
        entryFileNames: 'static/js/[name]-[hash].js',
        assetFileNames: 'static/[ext]/[name]-[hash].[ext]',
        manualChunks(id) {
          if (id.includes('node_modules')) {
            return id.toString().split('node_modules/')[1].split('/')[0].toString();
          }
        }
      }
    }
  }

提高静态资源的容量大小

build: {
 chunkSizeWarningLimit: 1000,
}

清除全局的console.log和debug

....
build: {
    terserOptions: { // 清除console和debugger
      compress: {
        drop_console: true,
        drop_debugger: true,
      }
    },
}

gzip静态资源压缩

下载gzip压缩插件

npm i vite-plugin-compression -D

在plugins中配置

import viteCompression from 'vite-plugin-compression'
...
  plugins: [
    viteCompression({ // gzip静态资源压缩配置
      verbose: true,
      disable: false,
      threshold: 10240,
      algorithm: 'gzip',
      ext: '.gz',
    }),
  ],

低版本浏览器兼容

npm i @vitejs/plugin-legacy -D

在plugins中配置

import legacyPlugin from '@vitejs/plugin-legacy'
...
  plugins: [
    legacyPlugin({
      targets: ['chrome 52'], // 需要兼容的目标列表，可以设置多个
      additionalLegacyPolyfills: ['regenerator-runtime/runtime'] // 面向IE11时需要此插件
    })
  ],

完整配置项

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import viteCompression from 'vite-plugin-compression'
import legacyPlugin from '@vitejs/plugin-legacy'
import { resolve } from 'path'
// https://vitejs.dev/config/
export default defineConfig({
  mode: 'production',
  plugins: [
    vue(),
    viteCompression({ // gzip静态资源压缩配置
      verbose: true,
      disable: false,
      threshold: 10240,
      algorithm: 'gzip',
      ext: '.gz',
    }),
    legacyPlugin({
      targets: ['chrome 52'], // 需要兼容的目标列表，可以设置多个
      additionalLegacyPolyfills: ['regenerator-runtime/runtime'] // 面向IE11时需要此插件
    })
  ],
  server: {
    port: 4000, // 设置端口号
    host: true, // 开启本机端口地址
    open: true, // 自动打开浏览器
    proxy: { // 配置跨域
      '/api': {
        target: '', // 服务地址
        changeOrigin: true,
      }
    }
  },
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src') // 配置根目录
    }
  },
  build: {
    chunkSizeWarningLimit: 1000, // 提高超大静态资源警告大小
    terserOptions: { // 清除console和debugger
      compress: {
        drop_console: true,
        drop_debugger: true,
      }
    },
    rollupOptions: {
      input: 'index.html',
      output: {
        // 静态资源打包做处理
        chunkFileNames: 'static/js/[name]-[hash].js',
        entryFileNames: 'static/js/[name]-[hash].js',
        assetFileNames: 'static/[ext]/[name]-[hash].[ext]',
        manualChunks(id) {
          if (id.includes('node_modules')) {
            return id.toString().split('node_modules/')[1].split('/')[0].toString();
          }
        }
      }
    }
  }
})