时间戳

首页 > 解决方案 > 为什么 nuxt-i18n 模块似乎没有加载？（ _vm.$t 不是函数）

javascript - 为什么 nuxt-i18n 模块似乎没有加载？（ _vm.$t 不是函数）

问题描述

所以我今天开始我的项目，我对 nuxt.js 的这个错误感到非常高兴。

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

它从何而来？

我也有一些_vm.localePath is not a function...

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

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

    }],
...

谢谢！

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

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

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

正如评论中所发现的，nuxt 是 1.0.0 版，原因很奇怪。我将软件包升级到 nuxt 1.4.2。我仍然有同样的问题。

完整的堆栈跟踪：

Server listening on http://127.0.0.1:3000
[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.

found in

---> <Default> at layouts/default.vue
       <Root>
[Vue warn]: Error in render: "TypeError: _vm.localePath is not a function"

found in

---> <Default> at layouts/default.vue
       <Root>
{ TypeError: _vm.localePath is not a function
    at Proxy.render (layouts/default.vue?2d02:32:0)
    at VueComponent.Vue._render (/media/drive/srv/node/ooo/node_modules/vue/dist/vue.runtime.common.js:4542:22)
    at renderComponentInner (/media/drive/srv/node/ooo/node_modules/vue-server-renderer/build.js:7532:25)
    at renderComponent (/media/drive/srv/node/ooo/node_modules/vue-server-renderer/build.js:7502:5)
    at RenderContext.renderNode (/media/drive/srv/node/ooo/node_modules/vue-server-renderer/build.js:7418:5)
    at RenderContext.next (/media/drive/srv/node/ooo/node_modules/vue-server-renderer/build.js:2436:14)
    at cachedWrite (/media/drive/srv/node/ooo/node_modules/vue-server-renderer/build.js:2295:9)
    at renderElement (/media/drive/srv/node/ooo/node_modules/vue-server-renderer/build.js:7656:5)
    at renderNode (/media/drive/srv/node/ooo/node_modules/vue-server-renderer/build.js:7420:5)
    at renderComponentInner (/media/drive/srv/node/ooo/node_modules/vue-server-renderer/build.js:7538:3)
    at renderComponent (/media/drive/srv/node/ooo/node_modules/vue-server-renderer/build.js:7502:5)
    at RenderContext.renderNode (/media/drive/srv/node/ooo/node_modules/vue-server-renderer/build.js:7418:5)
    at RenderContext.next (/media/drive/srv/node/ooo/node_modules/vue-server-renderer/build.js:2436:14)
    at RenderContext.next (/media/drive/srv/node/ooo/node_modules/vue-server-renderer/build.js:2449:12)
    at cachedWrite (/media/drive/srv/node/ooo/node_modules/vue-server-renderer/build.js:2295:9)
    at renderElement (/media/drive/srv/node/ooo/node_modules/vue-server-renderer/build.js:7646:5) statusCode: 500, name: 'TypeError' }

标签： javascriptinternationalizationnuxt.js

解决方案

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

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

聚会迟到了，但只需要解决同样的问题，所以我把它留在这里以防万一。

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

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

但是，我最近找到了一种更好的方法：

./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;

./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',
  ],
}

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

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

推荐阅读