vue3.2.X + Vite2.X + Pinia2.X的前端项目常见报错

在vue3.2.X + Vite2.X + Pinia2.X项目中，执行npm install 或者npm run dev 时，报以下几种错误的，均是因为版本不兼容,或者node版本过低导致，具体错误如下：

硬件环境： windows7 64位 + Node12.22.10 

错误一：vue 、vite、node 版本不兼容

error when starting dev server:
Error: Failed to resolve vue/compiler-sfc.
@vitejs/plugin-vue requires vue (>=3.2.25) to be present in the dependency tree.
    at resolveCompiler (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)
    at E:\2023\intelligent-equipment-screen\node_modules\vite\dist\node\chunks\dep-689425f3.js:39232:46
    at Array.map ()
    at Object.buildStart (E:\2023\intelligent-equipment-screen\node_modules\vite\dist\node\chunks\dep-689425f3.js:39230:39)
    at Server.httpServer.listen (E:\2023\intelligent-equipment-screen\node_modules\vite\dist\node\chunks\dep-689425f3.js:60350:37)
    at E:\2023\intelligent-equipment-screen\node_modules\vite\dist\node\chunks\dep-689425f3.js:48219:20
    at new Promise ()
    at httpServerStart (E:\2023\intelligent-equipment-screen\node_modules\vite\dist\node\chunks\dep-689425f3.js:48200:12)
    at startServer (E:\2023\intelligent-equipment-screen\node_modules\vite\dist\node\chunks\dep-689425f3.js:60380:30)

错误二：vue 、vite、node 版本不兼容

node_modules\vite-plugin-vue-setup-extend\node_modules\@vue\compiler-sfc\dist\compiler-sfc.cjs.js:16397
    #fillNegs() {
             ^
SyntaxError: Unexpected token '('
    at wrapSafe (internal/modules/cjs/loader.js:915:16)
    at Module._compile (internal/modules/cjs/loader.js:963:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10)
    at Module.load (internal/modules/cjs/loader.js:863:32)
    at Function.Module._load (internal/modules/cjs/loader.js:708:14)
    at Module.require (internal/modules/cjs/loader.js:887:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at Object. (E:\2023\intelligent-equipment-screen\node_modules\vite-plugin-vue-setup-extend\dist\index.cjs:3:21)
    at Module._compile (internal/modules/cjs/loader.js:999:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10)

错误三：这个是因为 vue 与 pinia 版本不兼容

error while updating dependencies:
Error: Build failed with 1 error:
node_modules/pinia/dist/pinia.mjs:6:9: ERROR: No matching export in "node_modules/vue-demi/lib/index.mjs" for import "hasInjectionContext"

错误四：npm run install 时报错

file:///F:/test2/node_modules/vite/bin/vite.js:7
    await import('source-map-support').then((r) => r.default.install())
    ^^^^^

SyntaxError: Unexpected reserved word
    at Loader.moduleStrategy (internal/modules/esm/translators.js:140:18)
    at async link (internal/modules/esm/module_job.js:42:21)

错误五：npm run build 时报错

/node_modules/@volar/vue-language-core/out/generators/template.js:202
                        tagOffsetsMap[tag] ??= [];
                                           ^^^

SyntaxError: Unexpected token '??='

node_modules\vue-tsc\out\index.js:75
            return getScript(fileName)?.version ?? '';

错误六：npm run dev/build 时都报错

Error: No known conditions for "./lib/locale/lang/zh-cn" entry in "element-plus" package

看到这个错误，你一定会以为是你的中文包引入错，其实不是，是因为element-plus的版本不一致导致的，我之前用的element-plus版本是3.2.5，然后最近安装的element-plus版本为3.2.7，然后就一直报这个错误，只要将版本降到3.2.5即可。

错误七：eslint src 时报错

> eslint src Oops! Something went wrong! :( ESLint: 8.50.0 E:\2023\projects\working-monitor-web\node_modules\eslint-plugin-vue\lib\rules\no-deprecated-model-definition.js:74     const allowVue3Compat = Boolean(context.options[0]?.allowVue3Compat)                                                        ^ SyntaxError: Unexpected token '.'     at wrapSafe (internal/modules/cjs/loader.js:915:16)     at Module._compile (internal/modules/cjs/loader.js:963:27)     at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10)     at Module.load (internal/modules/cjs/loader.js:863:32)     at Function.Module._load (internal/modules/cjs/loader.js:708:14)     at Module.require (internal/modules/cjs/loader.js:887:19)     at require (internal/modules/cjs/helpers.js:74:18)     at Object. (E:\2023\projects\working-monitor-web\node_modules\eslint-plugin-vue\lib\index.js:83:39)     at Module._compile (internal/modules/cjs/loader.js:999:30)     at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10) npm ERR! code ELIFECYCLE npm ERR! errno 2 npm ERR! [email protected] lint: `eslint src` npm ERR! Exit status 2 npm ERR! npm ERR! Failed at the [email protected] lint script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

这个错误是由于eslint-plugin-vue与node版本不兼容导致，目前我通过尝试，[email protected]与[email protected]是兼容的，所以，node版本为12的，还请注意，eslint-plugin-vue的版本要与之对应。

经过我再三试验，出现以上问题，均是因为依赖的版本不兼容导致，此时可修改依赖的版本，删除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": "2.3.5",
    "typescript": "4.9.5",
    "eslint-plugin-vue": "9.14.1",
}

以上内容，是本人开发时遇到并且头疼的问题，目前均已解决，如有错误，欢迎在评论区指出！