vue3.2.X + Vite2.X + Pinia2.X プロジェクトで、npm install または npm run dev を実行すると、次のエラーが報告されます。これらはすべて、互換性のないバージョンまたはノードのバージョンが低すぎるために発生します。は次のとおりです。
ハードウェア環境：Windows7 64bit + Node12.22.10
エラー 1: vue、vite、node のバージョンに互換性がありません
開発サーバーの起動時にエラーが発生しました:
エラー: vue/compiler-sfc を解決できませんでした。
@vitejs/plugin-vue では、vue (>=3.2.25) が依存関係ツリーに存在する必要があります。
replaceCompiler (E:\2023\intelligent-equipment-screen\node_modules\@vitejs\plugin-vue\dist\index.js:3955:11)
at Context.buildStart (E:\2023\intelligent-equipment-screen\node_modules) \@vitejs\plugin-vue\dist\index.js:4684:46)
E:\2023\intelligent-equipment-screen\node_modules\vite\dist\node\chunks\dep-689425f3.js:39232:
46 Object.buildStart のArray.map (<匿名>)
(E:\2023\intelligent-equipment-screen\node_modules\vite\dist\node\chunks\dep-689425f3.js:39230:39)
Server.httpServer.listen (E:\2023\intelligent-equipment-screen\node_modules\vite\dist\node\chunks\dep-689425f3.js:60350:37) E:\2023\intelligent-equipment-screen
\ httpServerStart の
新しい Promise (<anonymous>) でのnode_modules\vite\dist\node\chunks\dep-689425f3.js:48219:20 (E:\2023\intelligent-equipment-screen\node_modules\vite\dist\node\chunks)
\dep-689425f3.js:48200:12)
startServer (E:\2023\intelligent-equipment-screen\node_modules\vite\dist\node\chunks\dep-689425f3.js:60380:30)
エラー 2: vue、vite、node のバージョンに互換性がありません
node_modules\vite-plugin-vue-setup-extend\node_modules\@vue\compiler-sfc\dist\compiler-sfc.cjs.js:16397
#fillNegs() { ^ SyntaxError: WrapSafe で予期しないトークン '(' (内部/ modules/cjs/loader.js:915:16) Module._compile (internal/modules/cjs/loader.js:963:27) で Object.Module._extensions..js (internal/modules/cjs/loader.js) :1027:10) で Module.load (internal/modules/cjs/loader.js:863:32) で Function.Module._load (internal/modules/cjs/loader.js:708:14) で Module.require ( Internal/modules/cjs/loader.js:887:19) 要求時 (internal/modules/cjs/helpers.js:74:18)
Object.<anonymous> (E:\2023\intelligent-equipment-screen\node_modules\vite-plugin-vue-setup-extend\dist\index.cjs:3:21) で Module._compile (internal/modules/cjs
) /loader.js:999:30)
Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10)
エラー 3: これは、vue が pinia のバージョンと互換性がないためです。
依存関係の更新中にエラーが発生しました:
エラー: 1 つのエラーでビルドに失敗しました:
node_modules/pinia/dist/pinia.mjs:6:9: エラー: インポート "hasInjectionContext" に一致するエクスポートが "node_modules/vue-demi/lib/index.mjs" にありません」
エラー 4: npm run install がエラーを報告する
file:///F:/test2/node_modules/vite/bin/vite.js:7
await import('source-map-support').then((r) => r.default.install())
^^ ^^SyntaxError:非同期リンク
(internal/modules/esm/module_job.js:42:21) の Loader.moduleStrategy (internal
/modules/esm/translators.js: 140:18) に予期しない予約語があります
間違い 5: npm run build がエラーを報告する
/node_modules/@
volar/vue- language-core/out/generators/template.js:202 tagOffsetsMap[tag] ??= [];
^^構文エラー: 予期しないトークン '??='
node_modules\vue-tsc\out\index.js:75
return getScript(fileName)?.version ?? '';
間違い 6: dev/build の実行時に npm がエラーを報告する
エラー: 「element-plus」パッケージの「./lib/locale/lang/zh-cn」エントリの既知の条件はありません
このエラーが表示されると、中国語のパッケージが間違ってインポートされたと考えるでしょう。実際、それはelement-plus のバージョンが矛盾しているためではありません。以前使用していた element-plus のバージョンは 3.2.5 で、最近インストールされた要素 - Plus バージョンは 3.2.7 ですが、その後もこのエラーが報告され続けます。バージョンを 3.2.5 にドロップしてください。
テストを繰り返した結果、上記の問題はすべて依存関係の互換性のないバージョンが原因であることがわかりました。現時点では、依存関係のバージョンを変更し、package-lock.json を削除し、node_modules フォルダーを削除し、package.json を変更し、再実行することができます。 npm installを実行すると、プロジェクトが正常に起動できます。
変更する特定の依存関係のバージョンは次のとおりです。
{
"vue": "3.2.36",
"vite": "2.9.15",
"pinia": "2.0.33",
"vue-tsc": "0.35.2",
"element-plus": "3.2.5",
}上記の内容は私が開発中に遭遇した頭の痛い問題で、現在は解決していますが、間違いがあればコメント欄でご指摘ください。