Use Vite Today - Vue CLI 项目一键接入 vite，体验极速启动，闪电热更新

PENGRui
1,362 阅读2分钟

不改 vue-cli 项目业务代码，一键接入 Vite 目前仅提供开发阶段时候，构建阶段推荐继续使用 vue-cli，为了更好地分包，polyfill，老浏览器兼容性构建等成熟实践

logo

项目

使用步骤 (Use setup)

# 推荐 vue-cli 4.x
$ vue add vite

功能 (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 插件具备 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 是基于 webpack 的 bundler，入口文件不管是 SPA / MPA 都是 main.js / main.ts
    • vite 开发时是 no-bundle 工具，是个 devServer，入口文件目前仅支持 html 格式(内部其实也就是 <script type="module" src="../src/main.ts"></script> 而已)
  • 配置文件不同
    • 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，需要你访问 localhost.com:3000/src/pages/index/main.html 来访问(假设你有 src/pages/index/main.html 文件)
  • 特殊支持的语法不同
    • webpack 体系下，我们习惯于使用 $icon-font-path: '~@scope/xxx-ui/components/theme-chalk/fonts';
      • 这种语法，其中 '~' 代表 node_modules，这是一个 css-loader 特性，vite 并没有这种处理，需要大家注意，将代码进行修改，例如 $icon-font-path: '../../node_modules/@scope/xxx-ui/components/theme-chalk/fonts';
      • vite#issue382
    • vue-cli(webpack) 下热更新我们使用 module.hot, vite 下的 HMR API 为 import.meta.hot
    • 动态加载模块，vue-cli 下是 require.context，vite 下的 import.meta.glob/globEager

本插件原理

  • 解决并抹平上述所有差异，且 vite2.x 之后支持了非 / 开始和结尾的 alias 限制，增强了很多能力，理论上可以支持开发和构建了
  • 尽量复用项目已有的 vue.config.js 配置声明（仅支持团队通用插件例如约定式路由，MPA 等）
  • 使用 vue-cli-plugin 的 generator 能力，在执行 vue add 或 vue invoke 命令时，检测项目环境，例如是否使用 TS，是否是 MPA，是否是特定研发框架（例如到店 Rome 研发框架）
  • 检测环境结束，为项目 package.json 增加 npm scripts dev 命令，内容为基础内容加上述检测结果环境变量
  • yarn vite 执行会启动 vite 服务，根据检测结果确定 vite 插件，抹平 vite 与 vue-cli 对于环境变量处理方式的不同
  • 针对 MPA，约定式路由提供和对应 vue-cli 插件一样的能力(基于 vite plugin 规范编码，代码基本复用)
  • 通过 vite --config 命令调用本插件内部生成的 vite.config.ts，启动 ViteDevServer，进行正常开发
  • 整个过程不需要用户修改任何工程代码

如何真实使用

尝鲜，通过新工程使用

  • 推荐使用 vue-cli 4.x(3.x 太老，5.x 基于 webpack5 太新)
  • 可通过 vue-cli 的 vue create my-app 命令生成一个工程，然后按照上方使用步骤来体验
  • 可以查看本仓库的 examples

实际，为存项工程添加

  • 提交暂存区代码，通过上方使用步骤接入
  • 存量项目跑步起来的话，问题主要在于项目添加了除 vue-cli 官方 alias(通过 @ 代表 src) 以外的自定义 alias
    • 目前支持在项目 vue.config.js#pluginOptions#vite#alias 设置，例如 vite: { alias: { a: 'b' } }
  • 其他问题待补充，例如工程目录千奇百怪，本插件处理不了所有情况

底层包装的相关 Vite 插件

vite-plugin-vue2@underfin - Vue2.x vite 支持 vite-plugin-env-compatible - vue-cli 环境变量使用方式抹平 vite-plugin-vue-cli - vue-cli 与 vite 不同点的兼容 vite-plugin-mpa - 多页应用支持

附录

avatar
文章
阅读
粉丝