记录一下公司项目中element-plus由beta版本升级到稳定版的过程Element-Plus正式发布稳定版本，终于

写在开头

在公司中使用 Vue3 有一阵子了，当然，上 Vue3 的系统都是一些公司内部人员使用的后台系统，毕竟，使用 Vue3 还是要承担不少 "兼容性" 上的风险的。

而在今年的开年初，尤雨溪大佬已经是把 Vue3 作为了默认版本，这也宣布 Vue 即将进入 3 版本时代了，这份开年礼物还是相当有分量的。

不过，新年礼物不止一份，基于 Vue3 开发的 element-plus 组件库也送来一份礼品，就是 element-plus 也将正式发布稳定版本。

之前饱受 beta 版本的"折磨"，这下终于能解放了吧？(✪ω✪)

本章节，就来记录一下把公司的项目里面的 element-plus 从 beta 升级到稳定版本遇到的问题。

先贴一下原本项目中 package.json 文件的依赖信息：

{
  "dependencies": {
    "axios": "^0.21.1",
    "core-js": "^3.10.0",
    "echarts": "^5.2.2",
    "qrcode.vue": "^3.3.3",
    "vue": "^3.0.11",
    "vue-class-component": "^8.0.0-0",
    "vue-router": "^4.0.5",
    "vuex": "^4.0.0",
    "wangeditor": "^4.6.13",
    "element-plus": "^1.0.2-beta.36",
  },
  "devDependencies": {
    "@types/jest": "^24.0.19",
    "@typescript-eslint/eslint-plugin": "^2.33.0",
    "@typescript-eslint/parser": "^2.33.0",
    "@vue/cli-plugin-babel": "^4.5.12",
    "@vue/cli-plugin-eslint": "^4.5.12",
    "@vue/cli-plugin-router": "^4.5.12",
    "@vue/cli-plugin-typescript": "^4.5.12",
    "@vue/cli-plugin-unit-jest": "^4.5.12",
    "@vue/cli-plugin-vuex": "^4.5.12",
    "@vue/cli-service": "^4.5.12",
    "@vue/compiler-sfc": "^3.0.11",
    "@vue/eslint-config-typescript": "^5.0.2",
    "@vue/test-utils": "^2.0.0-rc.4",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^7.8.0",
    "stylus": "^0.54.7",
    "stylus-loader": "^3.0.2",
    "typescript": "^3.9.9",
    "vue-jest": "^5.0.0-0",
    "zip-webpack-plugin": "^4.0.1"
  }
}

安装最新element-plus版本

npm install element-plus@2.0.3 -D

安装完后，重新启动项目，Em...项目肯定是起不了。。。

报错一

因为项目中有两个文件引用了 element-plus 包中组件的 TS 类型文件，而 element-plus 稳定版中的项目结构稍微有改变，造成了路径出现问题。

这比较好解决，直接修改相关路径即可。

import { NotificationHandle } from 'element-plus/lib/components/notification/src/notification';

报错二

因为项目使用 element-plus 的时候，样式文件是直接全局引入的(ㄒoㄒ)，这就还是会出现路径问题。

再次修改。

import 'element-plus/dist/index.css';

.mjs文件中报错问题

element-plus 项目打包后，会在 element-plus/dist/locale 文件夹下生成一些组件的 .mjs 文件，这是一类和"国际化功能"相关的文件，源文件是在 element-plus/lib/locale 文件夹下。

这个报错是 webpack 内置并没有处理 .mjs 文件的能力，我们可以通过配置 rules 规则来绕过 webpack 的自动处理。

configureWebpack: {
    module: {
      // https://webpack.docschina.org/configuration/module#rulerules
      rules: [
        {
          test: /\.mjs$/,
          include: /node_modules/,
          type: 'javascript/auto'
        }
      ]
    },
}

升级vue版本

这是一些 vue 方法报错，我们直接来升级 vue 版本。

npm install vue@3.2.4 --f

--force 或者 -f 参数可以直接强制安装一个新版本，因为每次 npm install 会先检查 node_modules 是否存在该模块，存在则不再安装，--force 或者 -f 参数可以直接强制安装新版本。

升级 typescript 版本

vue 升级后，vue 中导出的 Composition API 直接就找不到了，两种原因，要么 Composition API 重新定义了，要么就是 TS 定义的类型问题，很明显是后者，而且不可能是只是单纯名称上的问题，从 stackoverflow 找到的答案说是版本问题。

直接升级版本就能解决，那就继续升它。

npm install typescript@4.3.5 -f

升完后，重新启动项目，Em...项目终于能跑起来了，成功了一小步呢。

稳定版本之间的简单介绍

截止到目前，也就是2022年02月28号这天，现在只有四个稳定版本，分别是 2.0.0、2.0.1、2.0.2、2.0.3，都是小版本之间的差异，并没有大版本改变，估计大多都是修复一些 fix 而已。小编查看了 element-plus 文档上的更新日志信息，并尝试升级切换 2.0.0 和 2.0.3 这两个的版本，再去对比项目中部分页面，呃......基本来说，两者并没有太大影响区别，如果确定想要 element-plus 升级稳定版本可以直接上 2.0.x 版本即可。