全网最硬核Element-UI从Vue-cli迁移到Vite（二）

1.前言前不久迁移了ant-design-vue-pro项目，参考文章：最硬核全网Ant-Design-Vue从Vue-cli迁移到Vite（一），迁移后项目地址：GitHub-Seals-Studio/ant-design-vue-pro-vite本期Element-UI库迁移到vue-element-admin项目为例进行迁移，element-ui版本为2.13.2。同时提供迁移后的仓库。欢迎来到Star~GitHub-Seals-Studio/vue-element-admin-vite二、背景众所周知，Vite作为下一代前端开发构建工具，有一个词：快。并且Vite已经被用作Vue3的默认构建工具。实验表明，项目迁移后，从Vue-cli的近2分钟到Vite的5秒（不同项目时间不同），速度提升了几十倍甚至上百倍。迁移前后对比（参考）构建工具服务器启动时间第一次页面加载速度（无缓存）第二次加载速度（有缓存）热更新HMR打包Webpack83s4.78s3.35s4.78s3mins37sVite4.72s（第二次）time0.72s)1.71s1.33sinstant51.45s3.删除package.json相关依赖删除@vue和babel相关{"@vue/cli-plugin-babel":"4.4.4","@vue/cli-plugin-eslint":"4.4.4","@vue/cli-plugin-unit-jest":"4.4.4","@vue/cli-service":"4.4.4","@vue/test-utils":"1.0.0-beta.29","babel-eslint":"10.1.0","babel-jest":"23.6.0","babel-plugin-dynamic-import-node":"2.3.3",}删除loader（webpack插件）和webpack{"html-webpack-plugin":"3.2.0","script-ext-html-webpack-plugin":"2.1.3","sass-loader":"8.0.2","svg-sprite-loader":"4.1.3",}删除babel.conf.js和jsconfig.json安装pnpm工具pnpm是一个快速、节省磁盘空间的包管理工具npmi-gpnpm#淘宝源pnpm配置集注册表https://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/sqlite3pnpm配置设置PYTHON_MIRRORhttp://npm.taobao.org/mirrors/python4.安装最新版本的vite和vite-plugin-vue2pnpmaddvitevite-plugin-vue2-D5.新建vite.conf.jsimport{defineConfig}from'vite'//vitepluginofvue2import{createVuePlugin}from'vite-plugin-vue2'exportdefault({mode})=>{returndefineConfig({plugins:[createVuePlugin({jsx:true})]})})六、修改index.html，将public/index.html移动到代码根目录保守党（和package.j子同级）在body标签中添加如下内容：替换htmlWebpackPlugin插件注入变量htmlWebpackPlugin是webpack插件，所以不能再使用。vite提供了vite-plugin-html插件来向index.html注入变量。安装vite-plugin-htmlpnpm添加vite-plugin-html-D修改vite.config.js，添加配置插件：[//...createHtmlPlugin({minify:true,inject:{data:{title:'vueElementAdmin',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