pnpm 之 monorepo 下 element-plus 设置中文失效

背景

最近在维护已有的公司仓库，发现是基于 pnpm 的 monorepo 架构的，业务侧提出， 分页组件希望改为中文，我心想，我记得是设置了中文的，但是发现本地 dev ，是中文，发布到生产环境，却是英文

shell 复制代码

- pnpm-workspace.yaml
- package.json
- packages
 - web-ssr nuxt3应用
 - web-c  SPA 业务
 - web-b  SAP业务
 - components   一些业务组件
     - xxTable 自定义基于element-plus 二开的表格

pnpm-workspace.yaml

makefile 复制代码

packages:
    - "packages/*"

pnpm 的配置很简单

业务代码中也就是一些基于 vite + element-plus +ts 的简单配置

排查方向

再次检查业务代码中的关于element-plus 多语言的设置

packages/web-b/src/main.ts

js 复制代码

import ElementPlus from "element-plus";
import zhCn from "element-plus/es/locale/lang/zh-cn";

app.use(ElementPlus, {
    locale: zhCn
});

console.log('中文包', zhCn)

// 将 vue3 实例挂到 window上
window.__VUE_APP__ = app

访问

js 复制代码

window.__VUE_APP__._context.provides

确实是中文

查看 element-plus 中多语言实现

这里 symbole 的key 是从 element-plus 的源码中获悉的

ts 复制代码

<script lang="ts" setup>
import { computed, ref, watchEffect } from 'vue'
import { useLocale, useNamespace } from '@element-plus/hooks'

defineOptions({
  name: 'ElPaginationPager',
})

const { t } = useLocale()
</script>

再找 useLocale 怎么定义的

/packages/hooks/use-locale/index.ts

ts 复制代码

export const localeContextKey: InjectionKey<Ref<Language | undefined>> =
  Symbol('localeContextKey')

export const useLocale = (localeOverrides?: Ref<Language | undefined>) => {
  const locale = localeOverrides || inject(localeContextKey, ref())!
  return buildLocaleContext(computed(() => locale.value || English))
}

排查方向2 二开的table 看看有没有自己引入语言包等，发现没有，也没有地方设置语言

tree 复制代码

- packages/
    components/
        package.json
        xx-table/
            - index.vue
            - pagination.vue

此时发现 components里面的 packages.json 是没有安装 element-plus ，但是在 index.vue中有使用，虽然我在业务侧 web-b, web-c 中有正常使用 pnpm 安装 components, 引入也是使用基于命名空间引入的。但是现在就是包的问题

packages/components/package.json

json 复制代码

{
  "name": "@kong-jian/components",
  "version": "1.0.0",
  "description": "",
  "main": "./index.ts",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "vite build"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "element-theme-chalk": "^2.15.14",
    "moment": "^2.30.1"
  },
  "devDependencies": {
    "@element-plus/icons-vue": "2.3.1",
    "@types/lodash-es": "^4.17.12",
    "@types/sortablejs": "^1.15.8",
    "@vitejs/plugin-vue": "^5.2.0",
    "@vitejs/plugin-vue-jsx": "^4.1.0",
    "lodash-es": "^4.17.21",
    "sortablejs": "^1.15.3",
    "typescript": "5.6.2",
    "unplugin-auto-import": "^0.18.5",
    "unplugin-vue-components": "^0.27.4",
    "vue": "^3.4.0",
    "vue-component-type-helpers": "^2.2.2",
    "vue-router": "^4.4.5"
  }
}

业务侧 (web-b, web-c 等)引入是这样使用的

ts 复制代码

<script setup lang="ts">
import {ProTable } from "@kong-jian/components";
</script>

业务侧的 package.json

packages/web-b/package.json

json 复制代码

{
  "name": "web-b",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "dev:staging": "vite --mode staging",
    "build:dev": "vite build --mode development",
    "build:staging": "vite build --mode staging",
    "build:prod": "vite build --mode prod",
    "type:check": "vue-tsc --noEmit --skipLibCheck"
  },
  "dependencies": {
    "@kong-jian/business-components": "workspace:^",
    "@kong-jian/components": "workspace:^",
    "@kong-jian/entity": "workspace:*",
    "@kong-jian/meta": "workspace:*",
    "@kong-jian/utils": "workspace:*",
    "vue": "^3.5.13",
    "vue-router": "^4.5.0",
  },
  "devDependencies": {
      ... 无关紧要的包
  }
}

这里安装依赖也没毛病。之前的 web-b中的 element-plus 中的 "element-plus": "2.8.3" ， root 层是 "element-plus": "^2.9.6"

解决：

通过将 web-b 中的 element-plus 删除依赖，因为 root层是有安装 element-plus 的，所以是可以在build 和 dev 找到依赖

推送到dev 环境测试，通过了。

小结

基于monorepo 的项目架构，存在多个版本，导致 provide/inject 失效， local 语言失效
monorepo 改变了以前通过 npm 包来回发布的问题，想要复用，直接引用当前的 components的组件，但是也会有一些问题，无法做版本管理，改动一点，可能会存在不兼容其他业务的情况，需要自测。