vue add i18n 在使用 vuejs3 和 @vue/cli 4.5.4 时遇到错误,该错误是啥意思以及如何调试?

Posted

技术标签:

【中文标题】vue add i18n 在使用 vuejs3 和 @vue/cli 4.5.4 时遇到错误,该错误是啥意思以及如何调试?【英文标题】:vue add i18n runs into error with vuejs3 and @vue/cli 4.5.4, what does the error mean and how to debug?vue add i18n 在使用 vuejs3 和 @vue/cli 4.5.4 时遇到错误,该错误是什么意思以及如何调试? 【发布时间】:2020-12-15 23:26:05 【问题描述】:

当我尝试 vue add i18n 时,我遇到了这个错误:

    ????  Invoking generator for vue-cli-plugin-i18n...
 ERROR  Error: You cannot call "get" on a collection with no paths. Instead, check the "length" property first to verify at least 1 path exists.
Error: You cannot call "get" on a collection with no paths. Instead, check the "length" property first to verify at least 1 path exists.
    at Collection.get (/usr/local/lib/node_modules/@vue/cli/node_modules/jscodeshift/src/Collection.js:213:13)
    at injectOptions (/usr/local/lib/node_modules/@vue/cli/lib/util/codemods/injectOptions.js:15:6)
    at runTransformation (/usr/local/lib/node_modules/@vue/cli/node_modules/vue-codemod/dist/src/run-transformation.js:61:17)
    at Object.keys.forEach.file (/usr/local/lib/node_modules/@vue/cli/lib/Generator.js:290:23)
    at Array.forEach (<anonymous>)
    at Generator.resolveFiles (/usr/local/lib/node_modules/@vue/cli/lib/Generator.js:276:24)
    at process._tickCallback (internal/process/next_tick.js:68:7)

vue add 命令之前的 package.json 是这样的:


  "name": "com.food-cheatsheet",
  "version": "0.1.0",
  "private": true,
  "scripts": 
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  ,
  "dependencies": 
    "core-js": "^3.6.5",
    "vue": "^3.0.0-0",
    "vue-router": "^4.0.0-0"
  ,
  "devDependencies": 
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0-0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^7.0.0-0",
    "tailwindcss": "^1.7.5"
  

到目前为止,我使用vue create 设置了项目并安装了tailwindcss 和postcss。

你能描述一下,这个错误的真正含义是什么?我猜它与 i18n 无关,但在我使用 add

时也会出现在其他模块中 npm install vue-i18n 工作(仅供参考)

其他问题

如何在 vuejs 3.0 中设置 i18n ?这里vuejs2和3的区别在哪里?

【问题讨论】:

【参考方案1】:

与 vuetifyjs https://github.com/vuetifyjs/vue-cli-plugins/issues/140 相同的问题

vue 3

npm install --save vue-i18n@next
yarn add vue-i18n@next

并手动配置 i18n

来自 vue-i18n-next 的示例:

Example with using Composable API

Example with using Legacy API

Examples Directory

如果你想安装 vue add i18n 更改

createApp(App)
  .use(store)
  .use(router)
  .mount("#app");

  new Vue(
    router,
    store,
    render: h => h(App)
  ).$mount("#app");

对于 typescript 项目添加 vue-i18n.d.ts 文件,内容为

declare module "vue-i18n"

对于 vue 3,我安装 npm install --save vue-i18n@next 而不是 vue add i18n

【讨论】:

谢谢队长明显;)我已经试过了,你可以在我的问题中读到。我的问题是关于实际错误。 您的一个问题是如何在 vuejs 3.0 中设置 i18n ?我像 vue 2 一样设置并且它可以工作,与 vuetifyjs github.com/vuetifyjs/vue-cli-plugins/issues/140 相同的问题

以上是关于vue add i18n 在使用 vuejs3 和 @vue/cli 4.5.4 时遇到错误,该错误是啥意思以及如何调试?的主要内容,如果未能解决你的问题,请参考以下文章

带有 vue-router 和 CDN 的 VueJS 3 路由

如何使用 vuejs3 中的图标?

从 Vue2 轻松迁移到 Vue JS 3 的最佳实践?

VUE:在 vue 3.x 中使用 i18n

VueJS3:从路由定义中传递数据

Vuejs3,Vite - 如何运行生产构建