vue3.2.X + Vite2.X + Pinia2.X 프로젝트에서 npm install 또는 npm run dev 실행 시 다음과 같은 오류가 보고되는데 모두 버전이 호환되지 않거나 노드 버전이 너무 낮기 때문에 발생합니다. 다음과 같습니다 :
하드웨어 환경: windows7 64-bit + Node12.22.10
오류 1: vue, vite, node 버전이 호환되지 않습니다.
개발 서버를 시작할 때 오류 발생:
오류: vue/compiler-sfc를 해결하지 못했습니다.
@vitejs/plugin-vue는 종속성 트리에 vue(>=3.2.25)가 있어야 합니다. Context.buildStart(E:\2023\intelligent-equipment-screen\node_modules)의 solveCompiler(E:\2023\intelligent-equipment
-screen\node_modules\@vitejs\plugin-vue\dist\index.js:3955:11)에서
\@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
\ node_modules\vite\dist\node\chunks\dep-689425f3.js:48219:20 httpServerStart(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: 예상치 못한 토큰 '(' at WrapSafe(내부/ Module._compile(internal/modules/cjs/loader.js:963:27), Object.Module._extensions..js (internal/modules/cjs/loader.js)에서 모듈/cjs/loader.js:915:16) :1027:10) Module.load(internal/modules/cjs/loader.js:863:32) at Function.Module._load(internal/modules/cjs/loader.js:708:14) at Module.require( 내부/모듈/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(내부/모듈/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
wait 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-언어-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" 항목에 대해 알려진 조건이 없습니다.
이 오류를 보면 분명 중국어 패키지를 잘못 import한 것이라고 생각하실 것입니다. 사실 element-plus 버전이 일치하지 않아서 그런 것은 아닙니다 . 이전에 사용했던 element-plus 버전은 3.2.5 였고, 최근에 설치된 요소 - 플러스 버전이 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",
}위 내용은 제가 개발하면서 겪었던 골치 아픈 문제인데, 현재까지 해결되었으니, 틀린 부분이 있으면 댓글로 지적해주세요!