Vue-cli迁移到Vite初体验

从0到1将一个Vue3.0+Vant-UI(v3.x)项目从Vue-cli迁移到Vite

你可能想知道

关于前端构建一些知识提纲
为什么选Vite?-官方

相关工具

wp2vite,一个将webpack项目转换为vite项目的工具

对比

参考来自 Vue-cli 与 Vite的区别-2021/2/22

迁移方案

1. 使用 vite 创建一个新的项目，将项目文件逐步迁移过去
2. 创建新分支，直接在新分支的文件上着手 本次迁移采用该方案

迁移过程

• 安装Vite请参考官方文档
• 新增vite.config.js配置文件并将vue.config.js配置迁移 [可使用wp2vite工具操作]
• 修改package.json,删除不必要的包和新增vite所需包
  
  • 删除所有vue-cli的包
  • 删除webpack相关的包
  • 修改package.json中scripts命令映射
• 修改env配置文件使其符合Vite规范 文档说明
• 删除package-lock.json文件和node_modules文件夹
• 重新执行 npm install
• 执行 vite 生成命令 vite 查看是否正常执行
• 执行 vite 构建命令 vite build 查看是否正常构建
• 构建正常后，执行 vite 本地构建测试命令 vite preview 查看本地构建运行结果是否正常
• 以上均正常，迁移成功

前后对比

对比环境采用相同用户在Chrome浏览器无缓存状态下的数据
使用AskBob-ORCP 术康服务包V1.2 ~/holderOrderList
机器环境：Mac os
Chrome版本：V93.0.4577.63
NodeJS: v16.9.1

值得注意

• Vite 构建使用ESM,不支持CommonJS语法

  所以需要将引用包方式从const r = require('package_name') 修改为 import pageage from 'package_name'

• 入口文件可配置,默认路径由/public 改为 / 官方说明

  Vue-cli 入口文件为 ~/public 但是 Vite的路径可在 vite.config.js 中配置root属性,默认为 process.cwd()。所以需要将原/public下的文件迁移到/根目录，或者roo改为/public

• 环境变量使用变更，从 process.env 换成 import.meta.env

  在一些js中可能会使用到环境变量进行判断，如process.env.NODE_ENV 在Vite中需要修改为 import.meta.env.MODE ，在index.html入口文件中，如果使用了ejs语法，此时无法通过import.meta.env拿到环境变量。详见下方坑&填坑/②

• 对CDN支持不友好，建议使用 npm 安装后 import 引入

  在迁移时遇到问题，在使用cdn时， 组件无法正常工作，报错 TypeError: ParentNode is undefined ,改为 import 后正常。
  涉及到 vue、vuex、vue-router

坑&填坑

最下方有一些好心网友经验文档，建议按需查阅

• ① index.html中ejs代码段未工作

  vue-cli默认使用html-webpack-plugin解释/public/index.html中的ejs模板语法，且开箱即用不需要自行再引入该包。vue-cli静态html说明
  vite需要支持入口文件中的ejs语法，需要在vite.config.js配置文件中引入插件vite-plugin-html来进行工作 。

• ② index.html中的process.env与import.meta.env无法正常工作

  1.Vite环境变量暴露变更，由process.env更改为import.meta.env
  2.Vite 不支持index.html文件中使用import.meta.env
  3.需要通过在vite.config.js中使用define配置，注入常量。官方文档
  4.Vite 暴露的环境变量需要符合envPrefix前缀，注意配置，默认为VITE_

  • Vite使用define注入env示意代码
    

    // 为保证导入正确，请务必注意配置中和loadEnv()入参中的envDir和 envPrefix保持一致
    import { defineConfig, loadEnv } from 'vite'
    export default defineConfig(mode=>{
        const envDir = 'env'
        const envPrefix = 'VITE_'
        const env = loadEnv(mode,envDir,envPrefix)
        return {
            define:{env},
            envDir,
            envPrefix
        }
    })

• ③ path配置 import 等路径别名，如@

  和vue-cli中使用webpack的resolve.alias一样，vite也使用相同的方式用于路径别名设置。配置方式如下

  resolve:{
      alias:{
          "@":path.resolve(__dirname,"./src")
      }
  }

• ④ jsonwebtoken包在运行和构建时有异常错误

  1.报错 property process is undefined。
  原因在jsonwebtoken中有判断process.version Nodejs版本，但是在运行时，已经没有了process环境变量。
  2.报错 package emitter is not found .
  原因未知

  解决方案：

  原来是全量引入jsonwebtoken,但是项目中仅仅使用了jsonwebtoken的decode方法
  删除引用jsonwebtoken改为引用jwt-decode,且将对应调用方式调整

• ⑤ svg图生成icon组件，require is undefined

  之前通过reqire.context(path,true,patter)动态引入全部svg现在只需要通过import.meta.globEager(patterRule)即可动态引入全部svg

  import SvgComponent from '/path'
  import Vue from 'vue'
  export default {
  Vue.component(SvgComponent);
  // 原引入方式
  const requireAll = reqContext =>reqContext.keys().map(requireContext);
  const req = request.context('./assets/svg',true,/\.svg$/);
  requireAlll(req);
  // 新引入方式
  import.meta.gloEager('./asstes/svg/*.svg')
  const water_levels = [];
  for (let [key, val] of Object.entries(modules)) {
      water_levels.push(val.default);
  }
  }

• ⑥ 文件缺失后缀导致import报错

  原vue-cli默认支持忽略后缀.vue,而Vite要求vue文件引入时确定后缀名。但是可以通过配置模糊匹配后缀。文档

  resolve:{
      extensions:['.vue','.js']
  }

• ⑦ Vite内联插件报错

  需要引入插件 @vitejs/plugin-vue Vite插件

• ⑧ 部分样式异常

  1.在less，使用了这样的 url('~@/path') 语法，搜索替换 将 ~@ 替换为 @ 就可以了
  2.前端组件引用vantUI(v3.x)组件库,该组件库按需使用需要引用vite-plugin-style-import插件，可参考vant官方文档#方式二. 在 Vite 项目中按需引入组件

其他人踩过的坑 🐶

• 👍👍👍 Vue2 项目从 vue-cli(webpack)迁移到了 vite 前往
• 👍👍 vue-cli迁移vite2实践小结 前往 OR 知乎链接
• 👍老项目 Webpack 迁移到 Vite，包含基础知识点和报错解决 前往
• 老的React+webpack项目迁移到vite 前往
• 使用vue-plugin插件钩子对旧代码进行编译前的转换 前往