该文章旨在纪录vite的基础配置，了解vite5和webpack5的区别
配置过程中出现的问题
- 我在配置
viteCompression的时候，曾配置成deleteOriginFile: true，导致项目无法正常展示，原因是设置为true之后，压缩成功之后会删除源代码，正常情况，页面出现404就会启动备份文件，但是没有了源代码作为备份文件，项目出现问题，就只能404了
vite5 和 webpack5 区别
- vite5 不需要配置过多的loader、plugin来加载文件比如ts-loader less-loader 等节省很多打包时间，而且它不需要在启动时对所有模块进行打包，而是直接基于源文件提供服务，所以启动速度很快，vite打包冗余少，更好地处理未使用的代码和模块
- Vite 是基于浏览器原生 ES 模块加载系统开发的构建工具。在开发模式下，它不需要打包整个项目，而是利用浏览器对 ES 模块的支持，直接将模块发送给浏览器。当浏览器请求一个模块时，Vite 会即时转换并提供这个模块，这使得开发服务器的启动速度非常快，而Webpack 的构建原理是将项目中的所有模块（包括 JavaScript、CSS、图片等各种资源）都视为一个依赖图。它从入口文件开始，递归地查找所有的依赖模块，然后将这些模块打包成一个或多个文件
热加载不同，webpack5热加载是需要通过webpack serve来启动的，而vite5启动项目npm run dev自动启动热加载，但是webpack5的热加载在修改代码之后会自动打包，而vite5则不会，但是Vite 的热更新速度通常比 Webpack 5 快。这是因为 Vite 基于 ES 模块的热更新机制更加简单直接，webpack需要重新构建整个模块图
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from "path"
import viteCompression from 'vite-plugin-compression'
// element plus 自动按需导入
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
console.log('vite 打包中');
export default defineConfig({
base: './',
plugins: [
vue(),
viteCompression({
algorithm: 'gzip', // 压缩算法，可选[‘gzip’，‘brotliCompress’，‘deflate’，‘deflateRaw’]
threshold: 10240, // 如果体积大于阈值，则进行压缩，单位为b
deleteOriginFile: false // 压缩后是否删除源文件 如果设置为true 可能会导致运行不了
// 某些服务器环境下可能无法正确处理压缩文件，需要使用原始文件进行备份
// 如果设置为true 则 原始文件被删除 就没有备份文件来启动项目了
}),
AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver()],
}),
],
resolve: {
// 设置别名，方便在代码中引用模块
alias: {
'@': path.resolve(__dirname, 'src')
}
},
build: {
outDir: 'dist',
// 生产环境下的优化设置
minify: 'terser',
terserOptions: {
// terser压缩选项，可根据需求调整
compress: {
drop_console: true, // 去除控制台输出
drop_debugger: true, // 去除debugger语句
},
},
rollupOptions: {
output: {
/** S-静态文件按类型分包 */
chunkFileNames: 'static/js/[name]-[hash].js',
entryFileNames: 'static/js/[name]-[hash].js',
assetFileNames: 'static/[ext]/[name]-[hash].[ext]',
/** E-静态文件按类型分包 */
manualChunks(id) { // 超大静态资源拆分
if (id.includes('node_modules')) {
return id.toString().split('node_modules/')[1].split('/')[0].toString();
}
}
},
},
},
server: {
port: 8080, // 设置开发服务器监听端口
host: '0.0.0.0', // 可通过任何IP访问开发服务器
strictPort: false, // 设为 true 时若端口已被占用则会直接退出，而不是尝试下一个可用端口
open: true, // 启动服务器时自动打开浏览器
hmr: true, // 热更新
proxy: {
'/api': {
target: 'http://xxx.xxx.xxx', // 后端服务器地址
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, '')
}
}
},
css: {
// CSS相关优化设置
postcss: {
// 配置PostCSS，例如添加autoprefixer等插件
plugins: [
// 示例：添加autoprefixer自动添加浏览器前缀
require('autoprefixer')({
overrideList: ['last 10 versions', '> 1%', 'ie 6-9'],
}),
],
},
preprocessorOptions: {
// 对预处理器（如Sass、Less等）的设置
less: {
// 导入全局变量文件
additionalData: `@import "${path.resolve(__dirname, 'src/less/variables.less')}";`,
// 修改Less的数学计算精度（可选）
math: 'always',
// 严格模式（可选），对语法等要求更严格
strictMath: true,
// 全局Less函数（可选），可以在这里定义一些全局函数供Less文件使用
globalVars: {
mainColor: 'blue'
}
}
},
},
optimizeDeps: {
// 优化依赖预构建，可指定需要预构建的模块或排除某些模块
include: ['vue', 'axios'], // 示例：预构建vue和axios模块
exclude: ['node_modules'], // 示例：排除某个不需要预构建的模块
},
})
