全网最硬核的Element

时间：2023-11-30 本站点击：0

一、前言

前不久，对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.78s3mins 37sVite4.72s (第二次 0.72s)1.71s1.33s瞬间51.45s

三、删除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是快速的，节省磁盘空间的包管理工具

npm i -g pnpm# 淘宝源pnpm config set registry https://registry.npm.taobao.org  pnpm config set disturl https://npm.taobao.org/distpnpm config set NVM_NODEJS_ORG_MIRROR http://npm.taobao.org/mirrors/node  pnpm config set NVM_IOJS_ORG_MIRROR http://npm.taobao.org/mirrors/iojs  pnpm config set PHANTOMJS_CDNURL https://npm.taobao.org/dist/phantomjs  pnpm config set ELECTRON_MIRROR http://npm.taobao.org/mirrors/electron/  pnpm config set SASS_BINARY_SITE http://npm.taobao.org/mirrors/node-sass  pnpm config set SQLITE3_BINARY_SITE http://npm.taobao.org/mirrors/sqlite3  pnpm config set PYTHON_MIRROR http://npm.taobao.org/mirrors/python

四、安装最新版vite和vite-plugin-vue2

pnpm add vite vite-plugin-vue2 -D

五、在根目录下新建Vite.conf.js

import { defineConfig } from 'vite'// vue2的vite插件import { createVuePlugin } from 'vite-plugin-vue2'export default ({ mode }) => {  return defineConfig({    plugins: [      createVuePlugin({        jsx: true      })    ]  })})

六、index.html修改

移动public/index.html到代码根目录（和package.json同级）

在body标签中新增如下：

<!-- 指明加载main.js --><script type="module" src="/src/main.js"></script>

替换htmlWebpackPlugin插件注入的变量

htmlWebpackPlugin是webpack插件，所以不能再使用了，vite提供了vite-plugin-html插件来向index.html注入变量

   plugins: [      // ...      createHtmlPlugin({        minify: true,        inject: {          data: {            title: 'vue Element Admin',            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'              ]            }          }        }      }),      // ...    ]

修改title

<title><%= title %></title>

修改css和js引入

    <!-- require cdn assets css -->    <% for (var i in cdn.css) { %>    <link rel="stylesheet" href="<%= cdn.css[i] %>" />    <% } %>    <!-- require cdn assets js -->    <% for (var i in cdn.js) { %>    <script type="text/javascript" src="<%= cdn.js[i] %>"></script>    <% } %>

修改index.html

安装vite-plugin-html

pnpm add vite-plugin-html -D

修改vite.config.js，添加配置

七、环境变量更换

出于安全考虑，vite只能识别以VITE_开头的环境变量了，原VUE_环境变量不生效了，同时，也不能使用process.env.xxx来读取环境变量了。需要修改vite.conf.js配置，手动添加process.env.xxx环境变量

修改vite.conf.js配置，添加环境变量

{    "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",}0

将所有开头的VUE_环境变量全部替换为VITE_

将所有的process.env.NODE_ENV更改为import.meta.env.MODE

将所有开头为process.env.全部更改为import.meta.env.

八、Element-UI按需引入

安装vite-plugin-style-import插件

{    "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",}1

增加vite.conf.js配置

{    "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",}2

九、添加代理

安装path-browserify

{    "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",}3

添加vite.conf.js配置

{    "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",}4

十、package.json脚本命令修改

将脚本命令修改为如下：

{    "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",}5

十一、postcss配置

安装插件

{    "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",}6

十二、添加eslint插件

安装插件

{    "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",}7

添加vite.conf.js配置

{    "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",}8

十三、在写有jsx语法的文件中添加lang="jsx"

{    "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",}9

十四、添加@别名

修改vite.conf.js配置

npm i -g pnpm# 淘宝源pnpm config set registry https://registry.npm.taobao.org  pnpm config set disturl https://npm.taobao.org/distpnpm config set NVM_NODEJS_ORG_MIRROR http://npm.taobao.org/mirrors/node  pnpm config set NVM_IOJS_ORG_MIRROR http://npm.taobao.org/mirrors/iojs  pnpm config set PHANTOMJS_CDNURL https://npm.taobao.org/dist/phantomjs  pnpm config set ELECTRON_MIRROR http://npm.taobao.org/mirrors/electron/  pnpm config set SASS_BINARY_SITE http://npm.taobao.org/mirrors/node-sass  pnpm config set SQLITE3_BINARY_SITE http://npm.taobao.org/mirrors/sqlite3  pnpm config set PYTHON_MIRROR http://npm.taobao.org/mirrors/python0

十五、静态文件引入

动态组件引入

npm i -g pnpm# 淘宝源pnpm config set registry https://registry.npm.taobao.org  pnpm config set disturl https://npm.taobao.org/distpnpm config set NVM_NODEJS_ORG_MIRROR http://npm.taobao.org/mirrors/node  pnpm config set NVM_IOJS_ORG_MIRROR http://npm.taobao.org/mirrors/iojs  pnpm config set PHANTOMJS_CDNURL https://npm.taobao.org/dist/phantomjs  pnpm config set ELECTRON_MIRROR http://npm.taobao.org/mirrors/electron/  pnpm config set SASS_BINARY_SITE http://npm.taobao.org/mirrors/node-sass  pnpm config set SQLITE3_BINARY_SITE http://npm.taobao.org/mirrors/sqlite3  pnpm config set PYTHON_MIRROR http://npm.taobao.org/mirrors/python1

静态图片引入

直接import图片

npm i -g pnpm# 淘宝源pnpm config set registry https://registry.npm.taobao.org  pnpm config set disturl https://npm.taobao.org/distpnpm config set NVM_NODEJS_ORG_MIRROR http://npm.taobao.org/mirrors/node  pnpm config set NVM_IOJS_ORG_MIRROR http://npm.taobao.org/mirrors/iojs  pnpm config set PHANTOMJS_CDNURL https://npm.taobao.org/dist/phantomjs  pnpm config set ELECTRON_MIRROR http://npm.taobao.org/mirrors/electron/  pnpm config set SASS_BINARY_SITE http://npm.taobao.org/mirrors/node-sass  pnpm config set SQLITE3_BINARY_SITE http://npm.taobao.org/mirrors/sqlite3  pnpm config set PYTHON_MIRROR http://npm.taobao.org/mirrors/python2

采用import.meta.globEager

npm i -g pnpm# 淘宝源pnpm config set registry https://registry.npm.taobao.org  pnpm config set disturl https://npm.taobao.org/distpnpm config set NVM_NODEJS_ORG_MIRROR http://npm.taobao.org/mirrors/node  pnpm config set NVM_IOJS_ORG_MIRROR http://npm.taobao.org/mirrors/iojs  pnpm config set PHANTOMJS_CDNURL https://npm.taobao.org/dist/phantomjs  pnpm config set ELECTRON_MIRROR http://npm.taobao.org/mirrors/electron/  pnpm config set SASS_BINARY_SITE http://npm.taobao.org/mirrors/node-sass  pnpm config set SQLITE3_BINARY_SITE http://npm.taobao.org/mirrors/sqlite3  pnpm config set PYTHON_MIRROR http://npm.taobao.org/mirrors/python3

npm i -g pnpm# 淘宝源pnpm config set registry https://registry.npm.taobao.org  pnpm config set disturl https://npm.taobao.org/distpnpm config set NVM_NODEJS_ORG_MIRROR http://npm.taobao.org/mirrors/node  pnpm config set NVM_IOJS_ORG_MIRROR http://npm.taobao.org/mirrors/iojs  pnpm config set PHANTOMJS_CDNURL https://npm.taobao.org/dist/phantomjs  pnpm config set ELECTRON_MIRROR http://npm.taobao.org/mirrors/electron/  pnpm config set SASS_BINARY_SITE http://npm.taobao.org/mirrors/node-sass  pnpm config set SQLITE3_BINARY_SITE http://npm.taobao.org/mirrors/sqlite3  pnpm config set PYTHON_MIRROR http://npm.taobao.org/mirrors/python4

图片加载

require.context替换

十六、雪碧图加载svg-sprite-loader替换

安装vite-plugin-svg-icons插件

npm i -g pnpm# 淘宝源pnpm config set registry https://registry.npm.taobao.org  pnpm config set disturl https://npm.taobao.org/distpnpm config set NVM_NODEJS_ORG_MIRROR http://npm.taobao.org/mirrors/node  pnpm config set NVM_IOJS_ORG_MIRROR http://npm.taobao.org/mirrors/iojs  pnpm config set PHANTOMJS_CDNURL https://npm.taobao.org/dist/phantomjs  pnpm config set ELECTRON_MIRROR http://npm.taobao.org/mirrors/electron/  pnpm config set SASS_BINARY_SITE http://npm.taobao.org/mirrors/node-sass  pnpm config set SQLITE3_BINARY_SITE http://npm.taobao.org/mirrors/sqlite3  pnpm config set PYTHON_MIRROR http://npm.taobao.org/mirrors/python5

配置vite.config.js

npm i -g pnpm# 淘宝源pnpm config set registry https://registry.npm.taobao.org  pnpm config set disturl https://npm.taobao.org/distpnpm config set NVM_NODEJS_ORG_MIRROR http://npm.taobao.org/mirrors/node  pnpm config set NVM_IOJS_ORG_MIRROR http://npm.taobao.org/mirrors/iojs  pnpm config set PHANTOMJS_CDNURL https://npm.taobao.org/dist/phantomjs  pnpm config set ELECTRON_MIRROR http://npm.taobao.org/mirrors/electron/  pnpm config set SASS_BINARY_SITE http://npm.taobao.org/mirrors/node-sass  pnpm config set SQLITE3_BINARY_SITE http://npm.taobao.org/mirrors/sqlite3  pnpm config set PYTHON_MIRROR http://npm.taobao.org/mirrors/python6

在main.js中添加

npm i -g pnpm# 淘宝源pnpm config set registry https://registry.npm.taobao.org  pnpm config set disturl https://npm.taobao.org/distpnpm config set NVM_NODEJS_ORG_MIRROR http://npm.taobao.org/mirrors/node  pnpm config set NVM_IOJS_ORG_MIRROR http://npm.taobao.org/mirrors/iojs  pnpm config set PHANTOMJS_CDNURL https://npm.taobao.org/dist/phantomjs  pnpm config set ELECTRON_MIRROR http://npm.taobao.org/mirrors/electron/  pnpm config set SASS_BINARY_SITE http://npm.taobao.org/mirrors/node-sass  pnpm config set SQLITE3_BINARY_SITE http://npm.taobao.org/mirrors/sqlite3  pnpm config set PYTHON_MIRROR http://npm.taobao.org/mirrors/python7

迁移后项目地址：GitHub - Seals-Studio/vue-element-admin-vite，欢迎Star~

原文：https://juejin.cn/post/7099763063615651848

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若转载，请注明出处：/Vue/3787.html