弯道快才是真的快
Vite是Vue的作者尤雨溪开发的Web开发构建工具，它是一个基于浏览器原生ES模块导入的开发服务器，在开发环境下，利用浏览器去解析import，在服务器端按需编译返回，完全跳过了打包这个概念，服务器随启随用。同时不仅对 Vue 文件提供了支持，还支持热更新，而且热更新的速度不会随着模块增多而变慢。在生产环境下使用 Rollup 打包。
Vite具有以下特点：
快速的冷启动 即时热模块更新（HMR，Hot Module Replacement） 真正按需编译
开发环境 效率提高80%，成产环境提高50%
文档详情
vite.config.js配置相关- 英文官网 vitejs.dev/config/
- 中文文档 cn.vitejs.dev/guide/using…
安装 旧项目迁移 vite 步骤（ Vue、React均可，步骤一样 ）
// 1. 安装
npm install -g wp2vite
// 2. 在当前 迁移项目 目录下 执行命令
wp2vite
// 3. npm install
.... 剩余的根据提示解决报错...
.... 迁移成功....
// ps: 后续每个人项目不同，报的错可能不一样，有问题及时沟通，可节约很多时间
// 1. process.env.NODE_ENV 改为 import.meta.env
// 1.1 找到当前项目 shims-vue.d.ts 增加如下代码
declare global {
namespace JSX {
// ......
}
interface ImportMeta {
env: Record<string, unknown>;
globEager<T = unknown>(globPath: string): Record<string, T>;
}
}
// 1.2 直接使用
import.meta.env //.......
// 2. require.context 改为 import.meta.globEager
const modulesFiles: any = import.meta.globEager<{default: unknown[]}>('./modules/*.ts')
const modules2 = Object.keys(modulesFiles).reduce((pre, cur) => {
const moduleName = cur.replace(/^\.\/(.*)\.\w+$/, '$1')
const fileNames = moduleName.replace('/modules', '').split('/')[1]
pre[fileNames] = fileNames
return pre
}, {})
export default modules2
注意事项
- 项目识别不了所有和
webpack相关方法，如：require,require.context
commonjs规范（require引入、module.exports导出）
↓ ↓ ↓
es6规范（import引入、export导出）
- 所有配置从
vue.config.js改为vite.config.ts - 环境变量
process.env改为import.meta.env - CSS深度选择器
/deep/改为::v-deep - vite 开发环境使用
esbuild，生产用rollup，可能会有bug不易调试，避免步入惯性思维的坑 - 项目安装依赖时，区分 --save 还是 --dev ，节省打包后体积
现存问题
- vite 打包
favicon.ico报错 ( 😱 格式为html ×) - eslint 无法正常使用
- vue2 + vite 技术待完善，各有利弊，建议使用vite本地开发，webpack打包部署
