一、使用步骤 (Use setup)
vue add @nibfe/vite
几个要求：
- Vite 需要 Node.js 版本 >= 12.0.0。
- Vite 要求项⽬完全由 ES Module 模块组成
- common.js 模块不能直接在 Vite 上使⽤
- 打包上依旧还是使⽤ rollup 等传统打包⼯具
二、功能 (Features)
- 提供 Vue CLI 开发时使用 Vite 的能力，即 yarn vite 使用 vite（背后是 vite server / esbuild / rollup 等） 而不是 vue-cli-service（背后是 webpack-dev-server / webpack plugin / webpack loader） 来驱动
- 提供用户侧代码无需任何改动接入 Vite 的能力
- 构建时即 yarn build 请保持使用 vue-cli 来执行，获得更兼容的编译结果
三、vite 与 vue-cli 异同点小结
-
打包工具不同
- vue-cli: webpack
- vite: rollup
-
入口文件不同
- vue-cli 是基于 webpack 的 bundler，入口文件不管是 SPA / MPA 都是 main.js / main.ts
- vite 开发时是 no-bundle 工具，是个 devServer，入口文件目前仅支持 html 格式(内部其实也就是 而已)
-
插件体系不同
- vue-cli 插件具备 generator / service 两种能力。generator 插件在安装时处理一些用户工程代码，达到开箱即用的目的，service 插件长效 patch webpack 配置，添加工程能力
- vite 插件基于 rollup plugin 体系，但也提供了自己独特的 hook，且定位为通用插件，即 serve / build 时都会用。（挺多 rollup 插件是直接可用于 vite 的）
-
环境变量处理方式不同：
- vite 和 vue-cli 虽然都是都通过 dotenv & dotenv-expand 来 load 对应 .env.* 文件，但是 vue-cli 会将解析出的环境变量暴露到本次启动命令进程的 process.env 上，vite 不会
- vue-cli 会将 VUE_APP_ 开头的环境变量通过 webpack definePlugin 注入到 client 端代码中，取值为 process.env.VUE_APP_XXX
- vite 会将 VITE_ 开头的环境变量通过 rollup replacement plugin 注入到 client 端代码中，取值为 import.meta.env.VITE_XXX
-
配置文件不同
- vue-cli 使用 vue.config.js 来配置，TS 支持度不好（插件开发时也不够好），采用核心配置 + 开放式的 pluginOptions 字段来描述，较为零散
- vite 使用 vite.config.ts 来配置，TS 支持好（插件开发也完全 strong type），每个插件放入 plugin 数组，插件是函数调用，配置直接函数参数传入
- vite 支持 --config 变量指定配置文件，也为我们在 vue-cli 项目中引入 vite 能力但不引入 vite 依赖和配置文件带来可能
-
MPA 多页应用支持不同
- vue-cli 有专属的 pages 选项结合多 html-webpack-plugin + devServer 做了路由 rewrite，让你很方便的通过 /index, /subpage 来访问 src/pages 下的页面
- vite 2.x 之后也是原生支持 MPA 的，但是并不自带路由 rewrite，需要你访问 local.sankuai.com:3000/src/pages/index/index.html 来访问(假设你有 src/pages/index/index.html 文件)
-
Vue⽀持：
- vue-cli: vue-loader
- vite:通过 @vitejs/plugin-vue插件⽀持
-
css/scss import 方式不同
- webpack 体系下，我们习惯于使用icon-font-path: '~@ss/mtd-vue/components/theme-chalk/fonts'; 这种语法，其中 '~' 代表 node_modules，这是一个 [css-loader 特性(https://webpack.js.org/loaders/css-loader/#import))，vite 并没有这种处理，需要大家注意，将代码进行修改，例如 icon-font-path: '../../node_modules/@ss/mtd-vue/components/theme-chalk/fonts';
- vite#issue382
- 配置项目不同
| 配置项 | vue-cli | vite |
|---|---|---|
| alias | 默认@ 指向 src | 无默认 |
-
import vue 组件不同
- vite必须写xxx.vue，
- vue-cli可以省略后面的.vue
四、底层包装的相关 Vite 插件
- vite-plugin-vue2@underfin - Vue 2 support for vite.
- vite-plugin-html-template - Like html-webpack-plugin for webpack.
- vite-plugin-vue-cli - Infer vite config from vue.config.js.
- Vite MPA
- Vite 环境变量兼容 vue-cli 项目
- Zone 总控
- Vite 约定式路由
- Vite Mock
五、那些你看不懂的名词：
- 不允许裸模块
在浏览器中，import 必须给出相对或绝对的 URL 路径。
import {sayHi} from 'sayHi'; // Error，“裸”模块，只有模块名，无路径。
// 模块必须有一个路径，例如 './sayHi.js' 或者其他任何路径
