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",
}

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

你可能感兴趣的:(vue3,vue3,vite2,pinia,vue-tsc,eslint,src)