全网最硬核的Ant-Design-Vue从Vue-cli迁移到Vite（一）

1.前言众所周知，Vite作为下一代前端开发构建工具，已经一个字：快。并且Vite已经被用作Vue3的默认构建工具。实验表明，项目迁移后，从Vue-cli的近2分钟到Vite的5秒（不同项目时间不同），速度提升了几十倍甚至上百倍。本文提供全网最全的老项目从Vue-cli迁移到Vite的解决方案。下面以ant-design-vue-pro为例进行迁移，ant-design-vue版本为1.7.8。同时提供迁移后的仓库。欢迎Star~GitHub-Seals-Studio/ant-design-vue-pro-vite关于Element-UI项目的迁移，参考文章：全网最硬核的Element-UI从Vue-cli的迁移到Vite（二）迁移前后对比（参考）构建工具服务器启动耗时页面第一次加载速度（无缓存）第二次加载速度（有缓存）热更新HMR打包Webpack83s4.78s3.35s4.78s3mins37sVite4.72s（第二次0.72s）1.71s1.33s瞬间51.45s2.删除package.json相关依赖删除@vue和babel相关{"@vue/babel-helper-vue-jsx-merge-props":"^1.2.1","@vue/cli-plugin-babel":"^4.5.17","@vue/cli-plugin-eslint":"^4.5.17","@vue/cli-plugin-router":"^4.5.17","@vue/cli-plugin-unit-jest":"^4.5.17","@vue/cli-plugin-vuex":"^4.5.17","@vue/cli-service":"^4.5.17","@vue/eslint-config-standard":"^4.0.0","@vue/test-utils":"^1.3.0","babel-eslint":"^10.1.0","babel-plugin-import":"^1.13.3","babel-plugin-transform-remove-console":"^6.9.4",}删除加载器（webpack插件）和webpack{"file-loader":"^6.2.0","less-loader":"^5.0.0","vue-svg-icon-loader":"^2.1.1","git-revision-webpack-plugin":"^3.0.6","webpack-theme-color-replacer":"^1.3.26",}删除babel.conf.js和jsconfig.json安装pnpm工具pnpm是一个快速、节省磁盘空间的包管理工具npmi-gpnpm#淘宝源码pnpmconfigsetregistryhttps://registry.npm.taobao。orgpnpm配置设置disturlhttps://npm.taobao.org/distpnpm配置设置NVM_NODEJS_ORG_MIRRORhttp://npm.taobao.org/mirrors/nodepnpm配置设置NVM_IOJS_ORG_MIRRORhttp://npm.taobao.org/mirrors/iojspnpm配置PHANTOMJS_CDNURLhttps://npm.taobao.org/dist/phantomjspnpm配置ELECTRON_MIRRORhttp://npm.taobao.org/mirrors/electron/pnpm配置SASS_BINARY_SITEhttp://npm.taobao.org/mirrors/node-sasspnpm配置设置SQLITE3_BINARY_SITEhttp://npm.taobao.org/mirrors/sqlite3pnpmconfigsetPYTHON_MIRRORhttp://npm.taobao.org/mirrors/python3.安装最新版本的vite和vite-plugin-vue2pnpmaddvitevite-plugin-vue2-D4.在rootCreatenewvite.conf.jsimport{defineConfig}from'vite'//Vue2的vite插件import{createVuePlugin}from'vite-plugin-vue2'exportdefault({mode})=>{returndefineConfig({plugins:[createVuePlugin({jsx:true})]})})五、修改index.html将public/index.html移至代码根目录下（与package.json同级）在body标签中添加如下内容：替换htmlWebpackPlugin插件注入的变量htmlWebpackPlugin是一个webpack插件，所以不能不再使用，vite提供vite-plugin-html插件，用于在index.html中注入变量安装vite-plugin-htmlpnpmaddvite-plugin-html-D修改vite.config.js，添加配置插件：[//...createHtmlPlugin({缩小:true,inject:{data:{title:'AntDesignPro',cdn:{css:[],js:['//cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js','//cdn.jsdelivr.net/npm/vue-router@3.5.1/dist/vue-router.min.js','//cdn.jsdelivr.net/npm/vuex@3.1.1/dist/vuex.min.js','//cdn.jsdelivr.net/npm/axios@0.21.1/dist/axios.min.js']}}}}),//...]修改index.html修改title修改css和jsimport<%for(variincdn.css){%>"/><%}%><%for(variincdn.js){%>到具有jsx语法的文件。14、添加@alias并修改vite.conf.js配置exportdefault({mode})=>{returndefineConfig({resolve:{//...alias:[{find:/@\/.+/,replacement:(val)=>{returnval.replace(/^@/,path.resolve(__dirname,'./src/'))},},]},)}15.静态文件导入动态组件导入常量模块=import.meta.glob('../views/**/*.vue')constcurrentRouter{...//组件：constantRouterComponents[item.component||item.key]||(()=>import(`/src/views/${item.component}`)),组件:constantRouterComponents[item.component||item.key]||modules[`../views/${item.component}.vue`],...}静态图片导入直接importimage<template>使用import.meta.globEager图片加载*2.require.context替换//修改前//constreq=require.context('./svg',false,/.svg$/)//constrequireAll=requireContext=>requireContext.keys().map(requireContext)//修改后的constreq=import.meta.globEager('./svg/*.svg')constrequireAll=(requireContext)=>Object.keys(requireContext).map((key)=>requireContext[key].default)###十六、其他问题：fim.js依赖包引用问题解决：删除viser-vue依赖包，可以使用官方G2包库@antv/g2plotpnpmremoveviser-vuepnpmadd@antv/g2plot问题：Ant-design-vue组件List引用问题，List.Item未定义解决方法一：替换代码//替换List组件代码，List.Item未定义if(source.indexOf('Vue.component(List.Item.name,List.Item);')){source=source.replace('Vue.component(List.Item.name,List.Item);','Vue.component("AListItem",Item);')}if(source.indexOf('Vue.component(List.Item.Meta.name,List.Item.Meta));')){source=source.replace('Vue.component(List.Item.Meta.name,List.Item.Meta);','Vue.component("AListItemMeta",Item.Meta);')}方案二：单独引用List.Item