Vue 3 包版本不匹配

Mey*_*ron 13 vue.js vuejs2 vuejs3

我正在尝试更新为 vue 3 制作的包,但遇到了 vue-template-compiler 的问题。

我尝试遵循类似的帖子,该帖子有某种类似的问题,但它似乎对我不起作用。(Vue包版本不匹配

我收到以下错误:

> @utt/message-system@1.1.4 build:es
> cross-env NODE_ENV=production rollup --config build/rollup.config.js --format es

[!] Error: 

Vue packages version mismatch:

- vue@3.1.1 (C:\projects\UTT-Message-System\module\node_modules\vue\index.js)
- vue-template-compiler@2.6.14 (C:\projects\UTT-Message-System\module\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.

Error: 

Vue packages version mismatch:

- vue@3.1.1 (C:\projects\UTT-Message-System\module\node_modules\vue\index.js)
- vue-template-compiler@2.6.14 (C:\projects\UTT-Message-System\module\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> (C:\projects\UTT-Message-System\module\node_modules\vue-template-compiler\index.js:10:9)
    at Module._compile (internal/modules/cjs/loader.js:1063:30)
    at Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
    at Object.require.extensions.<computed> [as .js] (C:\projects\UTT-Message-System\module\node_modules\rollup\dist\shared\loadConfigFile.js:516:13)
    at Module.load (internal/modules/cjs/loader.js:928:32)
    at Function.Module._load (internal/modules/cjs/loader.js:769:14)
    at Module.require (internal/modules/cjs/loader.js:952:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at Object.<anonymous> (C:\projects\UTT-Message-System\module\node_modules\@vue\component-compiler\dist\compiler.js:26:26)
    at Module._compile (internal/modules/cjs/loader.js:1063:30)
    at Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
    at Object.require.extensions.<computed> [as .js] (C:\projects\UTT-Message-System\module\node_modules\rollup\dist\shared\loadConfigFile.js:516:13)
    at Module.load (internal/modules/cjs/loader.js:928:32)
    at Function.Module._load (internal/modules/cjs/loader.js:769:14)
    at Module.require (internal/modules/cjs/loader.js:952:19)
    at require (internal/modules/cjs/helpers.js:88:18)

[nodemon] app crashed - waiting for file changes before starting...

Run Code Online (Sandbox Code Playgroud)

更新:我使用了rollup-plugin-vue包,它与 vue 3 不兼容,所以我安装了rollup-plugin-vue@next,现在我的文件中没有 vue-template-compiler package-lock.json

但现在我的插件 babel 出现了一个新错误,我正在尝试解决这个问题,所以如果有人可以分享任何想法,我们将不胜感激:

[!] (plugin babel) SyntaxError: C:\projects\UTT-Message-System\module\Components\MessageContainer.vue?vue&type=style&index=0&id=3d58915e&lang.css: Unexpected token (2:0)

  1 |
> 2 | ._messageList_yig6l_3 {
    | ^
  3 |   position: absolute;
  4 |   display: flex;
  5 |   flex-direction: column;
Components\MessageContainer.vue?vue&type=style&index=0&id=3d58915e&lang.css (2:0)
SyntaxError: C:\projects\UTT-Message-System\module\Components\MessageContainer.vue?vue&type=style&index=0&id=3d58915e&lang.css: Unexpected token (2:0)

  1 |
> 2 | ._messageList_yig6l_3 {
    | ^
  3 |   position: absolute;
  4 |   display: flex;
  5 |   flex-direction: column;
    at Parser._raise (C:\projects\UTT-Message-System\module\node_modules\@babel\parser\src\parser\error.js:134:45)
    at Parser.raiseWithData (C:\projects\UTT-Message-System\module\node_modules\@babel\parser\src\parser\error.js:129:17)
    at Parser.raise (C:\projects\UTT-Message-System\module\node_modules\@babel\parser\src\parser\error.js:78:17)
    at Parser.unexpected (C:\projects\UTT-Message-System\module\node_modules\@babel\parser\src\parser\util.js:179:16)
    at Parser.parseExprAtom (C:\projects\UTT-Message-System\module\node_modules\@babel\parser\src\parser\expression.js:1202:20)
    at Parser.parseExprSubscripts (C:\projects\UTT-Message-System\module\node_modules\@babel\parser\src\parser\expression.js:613:23)
    at Parser.parseUpdate (C:\projects\UTT-Message-System\module\node_modules\@babel\parser\src\parser\expression.js:593:21)
    at Parser.parseMaybeUnary (C:\projects\UTT-Message-System\module\node_modules\@babel\parser\src\parser\expression.js:560:23)
    at Parser.parseExprOps (C:\projects\UTT-Message-System\module\node_modules\@babel\parser\src\parser\expression.js:364:23)
    at Parser.parseMaybeConditional (C:\projects\UTT-Message-System\module\node_modules\@babel\parser\src\parser\expression.js:329:23)

[nodemon] app crashed - waiting for file changes before starting...
Run Code Online (Sandbox Code Playgroud)

谢谢您的帮助。

ndo*_*tie 20

从您的应用程序中删除“vue-template-compiler”

npm uninstall vue-template-compiler
Run Code Online (Sandbox Code Playgroud)

然后安装compiler-sfc,它取代了vue-template-compiler

npm i -D @vue/compiler-sfc
Run Code Online (Sandbox Code Playgroud)

确保你的 package.json 上没有 vue-template-compiler 并且你看到 vue/compiler-cfs

既然你已经删除了 vue-template-compiler 那么 vue-loader 会抱怨需要它工作,所以使用以下命令升级它以适用于 vue 3

npm install vue-loader@next
Run Code Online (Sandbox Code Playgroud)

由于您正在进行升级,因此根据您的项目配置,可能会出现其他错误。但继续解决,很快你就会让它运行起来

  • 我不知道为什么,但由于某种原因,即使在运行卸载命令后,我最终还是在 package-lock.json 中得到了 vue-template-compiler 。有什么线索吗?嗯,看起来 vueify 需要它。 (2认同)