element plus 升级最新版本踩坑指南

溜溜球形废物
7,069 阅读3分钟

前言

项目概括：vue3.0+vite+element-plus搭建的PC端管理系统

当前项目使用的还是"element-plus@1.0.2-beta.71"版本，现在已经到了2.2.9，中间更新的这些版本增加了很多的api支持。

比如：

  • 更好的icon支持
  • 2.2.0版本后的暗黑模式
  • 2.2.0 自定义命名空间
  • 2.2.0 Virtualized Table 虚拟化表格
  • 2.1.8 TreeSelect 树形选择

想要更好的使用element-plus 升级肯定是很有必要的～

开始升级

  1. 打开官网element-plus.gitee.io/zh-CN/guide…

  2. 打开 package.json 文件，dependencies中添加： "@element-plus/icons-vue": "2.0.6",, "element-plus": "2.2.9",, "vue": "3.2.36",

  3. devDependencies中添加："unplugin-auto-import": "0.6.0", "unplugin-vue-components": "0.20.1",

  4. 打开项目入口文件：main.js文件， 导入样式文件 import 'element-plus/theme-chalk/index.css'

  5. 全局注册ElementPlusIconsVue，添加如下代码

    import { ElLoading, ElIcon } from 'element-plus'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

const app = createApp(App)
app.use(ElIcon)

for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}

  6. 打开vite.config.js文件，增加如下代码：

    import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

//在defineConfig中的 plugins中增加：
const config = {
  plugins: [
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ]
}
// 如果历史中使用了 styleImport 进行引用 这里可以将其删除

  7. 接下来就可以本地 npm i, npm run dev 开始调整不同版本的样式问题了，只要项目能正常运行，接下来的事情就是根据控制台的告警进行代码逻辑修改以及样式调整就ok了。我遇到的几个问题，会在后续简单介绍。

  8. 最后是发布到测试环境进行验证的环节。在本地验证跑完之后，到线上发现直接构建失败了，报错如下： “/node_modules/unplugin-vue-components/node_modules/unplugin/dist/index.js:1037 setup: ((_a = plugin.esbuild) == null ? void 0 : _a.setup) ?? function setup({ onStart, onEnd, onResolve, onLoad, initialOptions, esbuild: { build: build2 } }) { ^SyntaxError: Unexpected token '?'”

    出现这个错误的原因也非常的简单：我们使用按需导入引用的unplugin的插件中使用了空值合并运算符（??也就是这连续的两个问号），但是我去mdn查了，这个运算符只兼容node14+的版本，而容器的node版本是10.15.3,所以在执行vite.config.js文件去构建的时候，就导致了报错。所以如果是本地运行报错，只要切换你的node版本到14+就可以了

  9. 修改gitlab-ci文件的node版本配置：更改如下：

      script:
  # 指定执行的node路径（不同项目或许有不同，总之大家根据自己项目需要改吧）
    - export PATH="/data/node14/bin:$PATH"
    - node -v

  10. 按照以上步骤，最终发布成功。

我遇到的一些修改点

  1. 组件的size 支持值取消了mini，改成了：[large / default /small], 这个相关的告警有很多，建议全局搜索改
  2. el-form组件，如果设置了label-width=’auto‘, 如果有某个el-form-item的label为空时，会有一个关于label-width的告警。这个时候只需要再给那个el-form-item单独设置一个label-width就可以了。
  3. 当select的allow-create为true，且select绑定的value为object时，会有一个"type check failed for prop "value". Expected String | Number | Boolean | Object, got Undefined "的告警。但是不影响使用，所以问题不大（主要是没找到可以改的地方，估计是组件的bug）
  4. el-date-picker组件在diasabled状态下，边框的显示有一点小问题。需要使用样式覆盖去修复一下，不然有点影响观看
  5. 在index.scss覆盖样式的时候，最好加个 !important，不然很难生效。

祝你升级愉快

avatar
文章
阅读
粉丝