- 我发现旧项目换vite一般都会去改造原有打包工具，为啥不能让二者并存呢，反正都是一套代码，两个打包工具并存也未尝不可
- 那就先在开发环境配一个vite，试试手吧（我试了，真香）
理由：
- vite速度快，对于开发环境启动项目神速友好
- 由于vite更新快，为了让生产环境稳定飞，还是先在开发环境试试手，毕竟开发环境才是主战场，不用等打包，开发效率翻倍
- 不影响webpack打包，做二手准备，两者并存互不影响
- 引入原来很简单，尝试一下吧
步骤
- npm i -D vite
- 安装vite-plugin-vue2（用于对 vue2 的支持）和vite-tsconfig-paths（路径映射的支持）
- 在根目录新建 index.html 和 vite.config.ts
- vite 对 type 类型引入并又在本文件直接引出的会报错（因为 esbuild 不支持类型枚举等，会在编译时清除，再 export 就会找不到，see github.com/vitejs/vite… ），需要加
type
// 此种情况要加type
import type { SimpleListItemRes } from '@/http/serverInterface'
...
...
export { SimpleListItemRes }
-
import type prettier会报错，因此升级prettier和@typescript-eslint/parser和@typescript-eslint/eslint-plugin，以支持import type -
vite 环境变量用
import.meta.env，.env文件里需要用VITE_开头。由于 vite 不支持process.dev，因此用vite.config.ts中的define来定义
define: {
'process.env': {
// 注意在vite中使用环境变量，需要用VITE_开头，这里定义是为了适配vue2
// @see https://cn.vitejs.dev/guide/env-and-mode.html
VUE_APP_XXX_API_BASE_URL: 'http://localhost:8080/xxx/',
},
},
- 让vite 支持
composition-api，需要在vite.config.ts中配置
createVuePlugin({
jsx: true,
jsxOptions: { compositionAPI: true, },
}),
- package.json中
"dev:vite": "vite --mode development", npm run dev:vite
vite几个关键点
- Native-ES-modules-based server for development
- Rollup-based build for production
<script type="module" >让浏览器当作js模块来执行- 浏览器不支持裸模块，如：
import Vue from 'vue，vite会预构建，截获import的这个请求，在vite服务器转换为一个相对路径 - 只加载当前模块和依赖模块
- 代码模块协商缓存，依赖用强制缓存
- ... （欢迎补充）
