Hyp*_*olf 5 javascript internationalization nuxt.js
所以我今天开始处理我的项目,我对 nuxt.js 的这个错误感到很高兴。
\n\n我删除了node_modules和.nuxt文件夹,重新发出ayarn install
但我仍然有这个错误,_vm.$t is not a function
。
它从何而来?
\n\n我还得到了一些_vm.localePath is not a function
...
我确保它也在我的模块中:
\n\nmodules: [\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\nKoa 和 Vuetify 将被 fastify 和 iview 取代,这就是它们存在的原因。
\n\n正如评论中所指出的,nuxt 版本为 1.0.0 的原因很奇怪。我将软件包升级到 nuxt 1.4.2。我仍然有同样的问题。
\n\n完整的堆栈跟踪:
\n\nServer 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
[编辑]我不知道问题是否在添加答案后被编辑,或者我只是没有正确理解问题,但我的答案描述了如何解决测试环境中的错误。
如果您在测试环境之外遇到此问题 - 抱歉,此答案对您没有帮助。
聚会迟到了,但必须解决同样的问题,所以我将其留在这里以防万一。
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 包。
然后在每个测试套件中,我需要使用我已经在这个答案之上提到的模拟。
归档时间: |
|
查看次数: |
7790 次 |
最近记录: |