Vue.js 使用 Vue I18n 的项目出现以下错误：“TypeError: i18n is undefined”

Question

我正在尝试使用 Vue I18n 在我的 Vue.js 项目中添加国际化。

我正在使用文档（即http://kazupon.github.io/vue-i18n/guide/sfc.html#basic-usage ），但我收到以下错误消息：

[Vue warn]: Error in render: "TypeError: i18n is undefined"

found in

---> <MainNavBar> at src/components/MainNavBar.vue
       <VApp>
         <App> at src/App.vue
           <Root> vue.runtime.esm.js:619 

TypeError: "i18n is undefined"
    $t vue-i18n.esm.js:167
    render MainNavBar.vue:33
    VueJS 42
    <anonymous> main.js:18
    js app.js:6991
    __webpack_require__ app.js:724
    fn app.js:101
    0 app.js:7304
    __webpack_require__ app.js:724
    <anonymous> app.js:791
    <anonymous> app.js:1 vue.runtime.esm.js:1887
    VueJS 45
    <anonymous> main.js:18
    js app.js:6991
    __webpack_require__ app.js:724
    fn app.js:101
    0 app.js:7304
    __webpack_require__ app.js:724
    <anonymous> app.js:791
    <anonymous> app.js:1

我不明白为什么 i18n 是“未定义的”，因为我已经通过 NPM 安装了它，如文档中所示。

有人可以帮助我吗？

我已经尝试在 inte.net 上寻找解决方案，但没有成功。

为了帮助解决这个问题，我在下面发送了我使用的代码。

先感谢您。

主导航栏.vue

<i18n>
{
  "en": {
    "home": "Home"
  },
  "pt": {
    "home": "Início"
  }
}
</i18n>

<template>
  ...
  <li class="nav-item">
    <router-link class="nav-link" to='/home'>
      <i class="fa fa-home"></i> {{ $t('home') }}
    </router-link>
  </li>
  ...
</template>

<script>
export default {
  data () {
    return {
      locale: 'en'
    }
  },
  watch: {
    locale (val) {
      this.$i18n.locale = val
    }
  }
}
</script>

主程序

import 'vuetify/dist/vuetify.min.css'

import Vue from 'vue'
import Vuetify from 'vuetify'
import VueI18n from 'vue-i18n'

import App from './App.vue'
import router from './router'
import store from './store'

Vue.use(Vuetify)
Vue.use(VueI18n)

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

vue.config.js

const merge = require('deepmerge')

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('vue')
      .use('vue-loader')
      .tap(options =>
        merge(options, {
          loaders: {
            i18n: '@kazupon/vue-i18n-loader'
          }
        })
      )
  }
}

package.json

{
  "name": "executive_frontend",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "test:e2e": "vue-cli-service test:e2e",
    "test:unit": "vue-cli-service test:unit"
  },
  "dependencies": {
    "axios": "^0.18.0",
    "bootstrap": "^4.3.1",
    "jquery": "^3.3.1",
    "material-design-icons-iconfont": "^4.0.5",
    "ol": "^5.3.1",
    "popper.js": "^1.14.7",
    "vue": "^2.6.7",
    "vue-i18n": "^8.10.0",
    "vue-router": "^3.0.1",
    "vuetify": "^1.5.6",
    "vuex": "^3.0.1"
  },
  "devDependencies": {
    "@kazupon/vue-i18n-loader": "^0.3.0",
    "@vue/cli-plugin-babel": "^3.4.0",
    "@vue/cli-plugin-e2e-nightwatch": "^3.4.0",
    "@vue/cli-plugin-eslint": "^3.4.0",
    "@vue/cli-plugin-unit-jest": "^3.4.0",
    "@vue/cli-service": "^3.4.0",
    "@vue/eslint-config-standard": "^4.0.0",
    "@vue/test-utils": "^1.0.0-beta.20",
    "babel-core": "7.0.0-bridge.0",
    "babel-eslint": "^10.0.1",
    "babel-jest": "^23.6.0",
    "deepmerge": "^3.2.0",
    "eslint": "^5.8.0",
    "eslint-plugin-vue": "^5.0.0",
    "node-sass": "^4.11.0",
    "sass-loader": "^7.1.0",
    "vue-template-compiler": "^2.5.21"
  }
}

Answer 1

您应该将 i18n 实例传递给 Vue 构造函数。

这是实例

const i18n = new VueI18n({
    locale: "en", // set default locale
    messages: {
        en: { // object with messages },
        fr: { // another locale messages }
    },
})

并在这里传递

new Vue({
    i18n,
    router,
    ...
})

Answer 2

观察者没有上下文。 您应该改用方法：

<template>
  <select @change="update">
    <option value="en">English</option>
    <option value="es">Español</option>
    <option value="ru">Русский</option>
  </select>
</template>

<script>
export default {
  methods: {
    update(e) {
      this.i18n.locale = e.target.value
    }
  }
}
</script>