为什么 nuxt-i18n 模块似乎没有加载?( _vm.$t 不是函数)

Hyp*_*olf 5 javascript internationalization nuxt.js

所以我今天开始处理我的项目,我对 nuxt.js 的这个错误感到很高兴。

\n\n

我删除了node_modules和.nuxt文件夹,重新发出ayarn install但我仍然有这个错误,_vm.$t is not a function

\n\n

它从何而来?

\n\n

我还得到了一些_vm.localePath is not a function...

\n\n

我确保它也在我的模块中:

\n\n
modules: [\n    [\'nuxt-i18n\', {\n      locales: [\n        { code: \'en\', iso: \'en-US\', name:\'English\', file: \'en-US.json\' },\n        { code: \'fr\', iso: \'fr-FR\', name:\'Fran\xc3\xa7ais\', file: \'fr.js\' },\n        // { code: \'es\', iso: \'es-ES\', name:\'English\', file: \'es.js\' }\n      ],\n      defaultLocale: \'en\',\n      // strategy: \'prefix_and_default\',\n      lazy: true,\n      langDir: \'i18n/\',\n      // By default, custom routes are extracted from page files using acorn parsing,\n      // set this to false to disable this\n      parsePages: true,\n\n    }],\n...\n
Run Code Online (Sandbox Code Playgroud)\n\n

谢谢!

\n\n

编辑:这是我的 package.json 文件:

\n\n
{\n  "name": "myproj",\n  "version": "1.0.0",\n  "description": "My classy Nuxt.js project",\n  "author": "",\n  "private": true,\n  "scripts": {\n    "dev": "cross-env NODE_ENV=development nodemon server/index.js --watch server",\n    "build": "nuxt build",\n    "start": "cross-env NODE_ENV=production node server/index.js",\n    "generate": "nuxt generate",\n    "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",\n    "precommit": "npm run lint"\n  },\n  "dependencies": {\n    "@fortawesome/fontawesome-svg-core": "^1.2.2",\n    "@fortawesome/pro-light-svg-icons": "^5.2.0",\n    "@nuxtjs/axios": "^5.0.0",\n    "fastify": "^1.11.0",\n    "iview": "^3.0.1",\n    "koa": "^2.3.0",\n    "nuxt": "^1.0.0",\n    "nuxt-fontawesome": "^0.3.0",\n    "nuxt-i18n": "^5.2.1",\n    "pg": "^7.4.3",\n    "vuetify": "^1.0.19"\n  },\n  "devDependencies": {\n    "babel-eslint": "^8.2.1",\n    "cross-env": "^5.0.1",\n    "eslint": "^5.0.1",\n    "eslint-loader": "^2.0.0",\n    "eslint-plugin-vue": "^4.0.0",\n    "nodemon": "^1.11.0",\n    "stylus": "^0.54.5",\n    "stylus-loader": "^3.0.1"\n  }\n}\n
Run Code Online (Sandbox Code Playgroud)\n\n

Koa 和 Vuetify 将被 fastify 和 iview 取代,这就是它们存在的原因。

\n\n

正如评论中所指出的,nuxt 版本为 1.0.0 的原因很奇怪。我将软件包升级到 nuxt 1.4.2。我仍然有同样的问题。

\n\n

完整的堆栈跟踪:

\n\n
Server listening on http://127.0.0.1:3000\n[Vue warn]: Property or method "localePath" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.\n\nfound in\n\n---> <Default> at layouts/default.vue\n       <Root>\n[Vue warn]: Error in render: "TypeError: _vm.localePath is not a function"\n\nfound in\n\n---> <Default> at layouts/default.vue\n       <Root>\n{ TypeError: _vm.localePath is not a function\n    at Proxy.render (layouts/default.vue?2d02:32:0)\n    at VueComponent.Vue._render (/media/drive/srv/node/ooo/node_modules/vue/dist/vue.runtime.common.js:4542:22)\n    at renderComponentInner (/media/drive/srv/node/ooo/node_modules/vue-server-renderer/build.js:7532:25)\n    at renderComponent (/media/drive/srv/node/ooo/node_modules/vue-server-renderer/build.js:7502:5)\n    at RenderContext.renderNode (/media/drive/srv/node/ooo/node_modules/vue-server-renderer/build.js:7418:5)\n    at RenderContext.next (/media/drive/srv/node/ooo/node_modules/vue-server-renderer/build.js:2436:14)\n    at cachedWrite (/media/drive/srv/node/ooo/node_modules/vue-server-renderer/build.js:2295:9)\n    at renderElement (/media/drive/srv/node/ooo/node_modules/vue-server-renderer/build.js:7656:5)\n    at renderNode (/media/drive/srv/node/ooo/node_modules/vue-server-renderer/build.js:7420:5)\n    at renderComponentInner (/media/drive/srv/node/ooo/node_modules/vue-server-renderer/build.js:7538:3)\n    at renderComponent (/media/drive/srv/node/ooo/node_modules/vue-server-renderer/build.js:7502:5)\n    at RenderContext.renderNode (/media/drive/srv/node/ooo/node_modules/vue-server-renderer/build.js:7418:5)\n    at RenderContext.next (/media/drive/srv/node/ooo/node_modules/vue-server-renderer/build.js:2436:14)\n    at RenderContext.next (/media/drive/srv/node/ooo/node_modules/vue-server-renderer/build.js:2449:12)\n    at cachedWrite (/media/drive/srv/node/ooo/node_modules/vue-server-renderer/build.js:2295:9)\n    at renderElement (/media/drive/srv/node/ooo/node_modules/vue-server-renderer/build.js:7646:5) statusCode: 500, name: \'TypeError\' }\n
Run Code Online (Sandbox Code Playgroud)\n

Igo*_*kov 6

[编辑]我不知道问题是否在添加答案后被编辑,或者我只是没有正确理解问题,但我的答案描述了如何解决测试环境中的错误。

如果您在测试环境之外遇到此问题 - 抱歉,此答案对您没有帮助。


聚会迟到了,但必须解决同样的问题,所以我将其留在这里以防万一。

解决此处提到的问题的一种方法是:

const wrapper = mount(MyComponent, {
  mocks: {
    // Always returns the input
    $t: i => i,
    localePath: i => i
  }
});
Run Code Online (Sandbox Code Playgroud)

不过,我最近发现了一个更好的方法:

./tests/jest.setup.js:

// https://github.com/nuxt/nuxt.js/issues/4115
import Vue from 'vue'
import { config } from '@vue/test-utils'

Vue.config.silent = true

// Mock Nuxt components
config.stubs['nuxt-link'] = true; // string stabs like '<a><slot /></a>' are now depreciated
config.stubs['no-ssr'] = true;
config.mocks.$t = i => i;
config.mocks.localePath = i => i;
Run Code Online (Sandbox Code Playgroud)

./jest.config.js:

module.exports = {
  setupFiles: [
    '<rootDir>/tests/jest.setup.js'
  ],
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/$1',
    '^~/(.*)$': '<rootDir>/$1',
    '^vue$': 'vue/dist/vue.common.js'
  },
  moduleFileExtensions: ['js', 'vue', 'json'],
  transform: {
    '^.+\\.js$': 'babel-jest',
    '.*\\.(vue)$': 'vue-jest'
  },
  collectCoverage: true,
  collectCoverageFrom: [
    '<rootDir>/components/**/*.vue',
    '<rootDir>/pages/**/*.vue'
  ],
  testPathIgnorePatterns: [
    'node_modules',
    'cypress',
  ],
}
Run Code Online (Sandbox Code Playgroud)

令人惊讶的是,即使我使用Nuxt Typescript ,我至少现在不需要安装ts-jest 包

然后在每个测试套件中,我需要使用我已经在这个答案之上提到的模拟。

  • 这个答案如何解决这个问题?实际上我遇到了与问题本身相同的问题,并且没有提到任何有关测试的内容。当我不想模拟 $t 方法时有什么解决方案吗? (3认同)