MonorePo中的VUE2和VUE3的构建：Vue-Template-Compiler的版本不匹配错误

Question

假设我使用pnpm在monorepo中有两个软件包。一个用于vue@3（ package-a ），另一个用于vue@2（ package-b ）。对于记录，它们都取决于第三个软件包，称为 core 。

您可以在下面找到它的样子：

.
├── .npmrc
├── .nvmrc
├── package.json
├── packages
│   ├── package-a
│   │   ├── index.ts
│   │   ├── node_modules
│   │   │   ├── .bin
│   │   │   │   ├── tsc
│   │   │   │   ├── tsserver
│   │   │   │   ├── vite
│   │   │   │   └── vue-tsc
│   │   │   ├── @myscope
│   │   │   │   └── core -> ../../../core
│   │   │   ├── @vitejs
│   │   │   │   └── plugin-vue -> ../../../../node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@vitejs/plugin-vue
│   │   │   ├── typescript -> ../../../node_modules/.pnpm/[email protected]/node_modules/typescript
│   │   │   ├── vite -> ../../../node_modules/.pnpm/[email protected]/node_modules/vite
│   │   │   ├── vue -> ../../../node_modules/.pnpm/[email protected]/node_modules/vue
│   │   │   └── vue-tsc -> ../../../node_modules/.pnpm/[email protected][email protected]/node_modules/vue-tsc
│   │   ├── package.json
│   │   ├── tsconfig.json
│   │   ├── tsconfig.node.json
│   │   └── vite.config.ts
│   ├── package-b
│   │   ├── index.ts
│   │   ├── node_modules
│   │   │   ├── .bin
│   │   │   │   ├── tsc
│   │   │   │   ├── tsserver
│   │   │   │   ├── vite
│   │   │   │   └── vue-tsc
│   │   │   ├── @myscope
│   │   │   │   └── core -> ../../../core
│   │   │   ├── typescript -> ../../../node_modules/.pnpm/[email protected]/node_modules/typescript
│   │   │   ├── vite -> ../../../node_modules/.pnpm/[email protected]/node_modules/vite
│   │   │   ├── vite-plugin-vue2 -> ../../../node_modules/.pnpm/[email protected]_dj3dtukdyynhbiqf2xbv2ocyei/node_modules/vite-plugin-vue2
│   │   │   ├── vue -> ../../../node_modules/.pnpm/[email protected]/node_modules/vue
│   │   │   ├── vue-template-compiler -> ../../../node_modules/.pnpm/[email protected]/node_modules/vue-template-compiler
│   │   │   └── vue-tsc -> ../../../node_modules/.pnpm/[email protected][email protected]/node_modules/vue-tsc
│   │   ├── package.json
│   │   ├── tsconfig.json
│   │   ├── tsconfig.node.json
│   │   └── vite.config.ts
│   └── core
│       ├── index.ts
│       └── package.json
├── pnpm-lock.yaml
└── pnpm-workspace.yaml

在 packages/package-a/povpage.json 中：

{
  "name": "@myscope/package-a",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "build": "vue-tsc --noEmit && vite build"
  },
  "dependencies": {
    "@myscope/core": "workspace:*",
    "vue": "^3.2.25"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^2.3.3",
    "typescript": "^4.5.4",
    "vite": "^2.9.9",
    "vue-tsc": "^0.34.7"
  }
}

in packages/package-b/poffcate.json

{
  "name": "@myscope/package-b",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "build": "vue-tsc --noEmit && vite build"
  },
  "dependencies": {
    "@myscope/core": "workspace:*",
    "vue": "^2.6.14"
  },
  "devDependencies": {
    "typescript": "^4.5.4",
    "vite": "^2.9.9",
    "vite-plugin-vue2": "^2.0.0",
    "vue-template-compiler": "^2.6.14",
    "vue-tsc": "^0.34.7"
  }
}

当我运行时pnpm在 package-b （vue@2）中，pnpm run build 我得到了版本不匹配错误，而应该不应该：

> vue-tsc --noEmit && vite build

failed to load config from /path/to/my/project/monorepo/packages/package-b/vite.config.ts
error during build:
Error: 

Vue packages version mismatch:

- [email protected] (/path/to/my/project/monorepo/node_modules/.pnpm/[email protected]/node_modules/vue/index.js)
- [email protected] (/path/to/my/project/monorepo/node_modules/.pnpm/[email protected]/node_modules/vue-template-compiler/package.json)

This may cause things to work incorrectly. Make sure to use the same version for both.
If you are using vue-loader@>=10.0, simply update vue-template-compiler.
If you are using vue-loader@<10.0 or vueify, re-installing vue-loader/vueify should bump vue-template-compiler to the latest.

    at Object.<anonymous> (/path/to/my/project/monorepo/node_modules/.pnpm/[email protected]/node_modules/vue-template-compiler/index.js:10:9)
    at Module._compile (node:internal/modules/cjs/loader:1101:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object.<anonymous> (/path/to/my/project/monorepo/node_modules/.pnpm/[email protected]_dj3dtukdyynhbiqf2xbv2ocyei/node_modules/vite-plugin-vue2/dist/utils/descriptorCache.js:34:42)
    at Module._compile (node:internal/modules/cjs/loader:1101:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object.<anonymous> (/path/to/my/project/monorepo/node_modules/.pnpm/[email protected]_dj3dtukdyynhbiqf2xbv2ocyei/node_modules/vite-plugin-vue2/dist/main.js:35:27)
    at Module._compile (node:internal/modules/cjs/loader:1101:14)
 ELIFECYCLE  Command failed with exit code 1.
 ELIFECYCLE  Command failed with exit code 1.

似乎已解决的版本未遵循 package.json < /code>并使用 vue@3 而不是 vue@2 。我不明白为什么。这可能是关于 vue-template-compiler 解决vue之类的错误吗？

我发现可以使它工作的“肮脏”解决方法是添加到 .npmrc 在项目的根部，但我不知道通过这样做可能会得到什么副作用。无论如何，是否有一种更干净的方法可以解决此问题？

PS。这可以与 https://github.com/vuejs/vuejs/vuejs/vue/vue/issues/11828 但是我在这里问，请在封闭的问题中回复。

Answer 1

从 i got eve）

有两种可能的解决方案对我独立工作：

a）将vue-tsc移至root package.json。这是我尝试将所有项目工具放在各个软件包中所做的。

b）在package.json中使用“ pnpm.packageextentions”。

。 ：//github.com/pnpm/pnpm/blob/main/packages/pnpm/changelog.md#700“ rel =“ nofollow noreferrer”>打破变化：

根工作空间项目的依赖项不用于解决其他工作区项目的同伴依赖性＃44669>＃444699

with pnpm.packageextensions nohoist = false 到 .npmrc 。

diff --git i/package.json w/package.json
index 95cda08..182e89d 100644
--- i/package.json
+++ w/package.json
@@ -41,5 +41,14 @@
   "packageManager": "[email protected]",
   "engines": {
     "node": ">=16.15.0"
+  },
+  "pnpm": {
+    "packageExtensions": {
+      "vue-template-compiler": {
+        "peerDependencies": {
+          "vue": "^2.6.14"
+        }
+      }
+    }
   }
 }