Vue3+Vite打包配置全过程(包括分包配置)

import { defineConfig } from 'vite'
//配置组件路径别名需引入resolve
import{ resolve } from 'path'
 
export default defineConfig({
  //配置根路径，解决部署到服务器之后绝对路径会报404问题，所以需改为相对路径
  base:"./",

  server: {
    open: true,  //自动打开浏览器
    proxy: {
      // 字符串简写写法，其他方法可看vite官网，使用方法与webpack解决跨域一样
      '/foo': 'baseURL地址',
    }
  },

  // 路径别名
  resolve: {
    dedupe: ['vue'],
	alias: [{
      find: '@',
	  replacement: resolve(__dirname, 'source')
	}]
  },

  // 生产环境移除console.log的配置
  build:{
    // 默认是esbuild,但这里需要改成terser，并且想使用terser的话，需提前安装，命令为npm add -D terser                     
    minify:"terser",
    outDir: "dist",
    terserOptions: {
      compress: {
        //生产环境时移除console
        drop_console: true,
        drop_debugger: true,
      },
      format: {
		comments: false,      // 删除注释
	  }
    },
  },
  plugins: [],
})

//下载包
npm i vite-plugin-compression -D

//在vite.config.ts中
import viteCompression from 'vite-plugin-compression'


//在plugins中配置即可
plugins: [
  viteCompression({ verbose: true, disable: false, threshold: 10240, algorithm: 'gzip', ext: '.gz' }), 
]

build: {
	rollupOptions: {
		output: {
            //1) 使用函数方式
			manualChunks: (id:any) => {
				if (id.includes('node_modules')) {
					if (id.includes('element-plus')) return 'element-plus';
					else if (id.includes('lodash')) return 'lodash';
				}
			},
            //2) 使用键值对的方式
            manualChunks: {
                'element': ['element-plus']
            }

            //打包后的文件命名格式
			entryFileNames: `js/[name].[hash].js`,
			chunkFileNames: `js/[name].[hash].js`,
			assetFileNames: `static/[ext]/[hash].[ext]`
		}
	}
},