这里介绍的是vite项目的打包配置，若想了解webpack打包配置可看我的其他博客。（下面来介绍下vite打包配置的步骤）
1、步骤一：配置base。(为什么需要配置base？这里配置base主要是修改根路径，一般我们在开发环境中引用静态资源可能使用的是绝对路径，但是一旦打包部署到服务器上后可能会报404,无法正确的获取的资源。)
//在vite.config.ts中
import { defineConfig } from 'vite'export default defineConfig({
//配置根路径，解决部署到服务器之后绝对路径会报404问题，所以需改为相对路径base:"./",
})
2、步骤二：可根据需要配置组件及静态资源路径别名（若配置了路径别名使用方法和typescript的类型别名一样，直接替换原路径即可）
//在vite.config.ts中
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
//配置组件路径别名需引入resolve
import{resolve} from 'path'export default defineConfig({//配置根路径，解决部署到服务器之后绝对路径会报404问题，所以需改为相对路径base:"./",// 路径别名resolve: {alias: {'@': fileURLToPath(new URL('./src', import.meta.url)),// 组件路径别名,语法：别名：resolve(__dirname,'组件原路径')com:resolve(__dirname,'src/component'),//静态资源路径别名'./image':'src/assets'}}
})3、步骤三：配置生产环境移除console.log。
//在vite.config.ts中
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import{resolve} from 'path'export default defineConfig({//配置根路径，解决部署到服务器之后绝对路径会报404问题，所以需改为相对路径base:"./",// 路径别名resolve: {alias: {'@': fileURLToPath(new URL('./src', import.meta.url)),// 组件路径别名,语法：别名：resolve(__dirname,'组件原路径')com:resolve(__dirname,'src/component'),//静态资源路径别名'./image':'src/assets'}},// 生产环境移除console.log的配置build:{// 默认是esbuild,但这里需要改成terser，并且想使用terser的话，需提前安装，命令为npm add -D
//terserminify:"terser",terserOptions: {compress: {//生产环境时移除consoledrop_console: true,drop_debugger: true,},},}
})
4、步骤四：设置代理解决跨域。（使用方法与webpack解决跨域一样）
//在vite.config.ts中
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import{resolve} from 'path'export default defineConfig({//配置根路径，解决部署到服务器之后绝对路径会报404问题，所以需改为相对路径base:"./",server: {proxy: {// 字符串简写写法，其他方法可看vite官网，使用方法与webpack解决跨域一样'/foo': 'baseURL地址',}},// 路径别名resolve: {alias: {'@': fileURLToPath(new URL('./src', import.meta.url)),// 组件路径别名,语法：别名：resolve(__dirname,'组件原路径')com:resolve(__dirname,'src/component'),//静态资源路径别名'./image':'src/assets'}},// 生产环境移除console.log的配置build:{// 默认是esbuild,但这里需要改成terser，并且想使用terser的话，需提前安装，命令为npm add -D terserminify:'terser',terserOptions: {compress: {//生产环境时移除consoledrop_console: true,drop_debugger: true,},},}
})
5、打包优化，使用CDN分发。（忽略，后面更新）
//安装cdn插件
npm install vite-plugin-cdn-import --save-dev//引入插件，在vite.config.ts中
//import importToCDN from "vite-plugin-cdn-import"
//或
import { Plugin as importToCDN } from "vite-plugin-cdn-import"6、代码压缩。
npm i vite-plugin-compression -D//在vite.config.ts中
import viteCompression from 'vite-plugin-compression'
//在plugins中配置即可
plugins: [viteCompression(),
]7、图片压缩。
npm i vite-plugin-imagemin -D//在vite.config.ts中
import viteImagemin from 'vite-plugin-imagemin'
//在plugins下写
viteImagemin({gifsicle: {optimizationLevel: 7,interlaced: false},optipng: {optimizationLevel: 7},mozjpeg: {quality: 20},pngquant: {quality: [0.8, 0.9],speed: 4},svgo: {plugins: [{name: 'removeViewBox'},{name: 'removeEmptyAttrs',active: false}]}})
8、打包命令配置。
//在package.json中
"build": "vite build",
