Vue-i18n '프록시에 정의되지 않은 속성 '_t'을 읽을 수 없습니다.Vue.$t'

Vue-i18n '프록시에 정의되지 않은 속성 '_t'을 읽을 수 없습니다.Vue.$t'

vue-i18n을 앱에 통합하는 데 문제가 있습니다.이 페이지를 영감으로 사용.

  <b-navbar-nav class="ml-auto" >
    <b-nav-item-dropdown :text="display_name" right>
      <b-dropdown-item disabled>{{ $t('username') }}: {{ username }}</b-dropdown-item>
      <b-dropdown-item disabled>Organisation: {{ organisation }}</b-dropdown-item>
    </b-nav-item-dropdown>
  </b-navbar-nav>

다음 오류가 표시됩니다.Cannot read property '_t' of undefined at Proxy.Vue.$tChrome devtools의 오류를 추적하면 vue-i18n.esm.js의 149행(반환문)으로 이동합니다.

Vue.prototype.$t = function (key) {
  var values = [], len = arguments.length - 1;
  while ( len-- > 0 ) values[ len ] = arguments[ len + 1 ];

  var i18n = this.$i18n;
  return i18n._t.apply(i18n, [ key, i18n.locale, i18n._getMessages(), this ].concat( values ))
};

vue-cli-3 웹 팩 구성을 사용하여 npm부터 vue-i18n을 설치하고 플러그인으로 사용합니다.

i18n.disc(src/plugins 디렉토리):

import Vue from 'vue/dist/vue.js';
import VueI18n from 'vue-i18n';

Vue.use(VueI18n);

const messages = {
  'en': {
    username: 'Username',
    ...
  },
  'se': {
    username: 'Användarnamn',
    ...
  }
};

export let i18n = new VueI18n({
  locale: 'en', // set locale
  fallbackLocale: 'se', // set fallback locale
  messages, // set locale messages
});

main.filename:

import Vue from 'vue/dist/vue.js'
import VueRouter from 'vue-router'
import BootstrapVue from 'bootstrap-vue'
import VueSpinners from 'vue-spinners'

import i18n from './plugins/i18n'
...
new Vue({
  router,
  i18n,
  data() {
    return store;
  },
  render: h => h(App)
}).$mount('#app')

패키지의 종속성.json:

"dependencies": {
  "axios": "^0.18.0",
  "bootstrap-vue": "^2.0.0-rc.11",
  "npm": "^6.5.0",
  "ol": "^5.3.0",
  "proj4": "^2.5.0",
  "qs": "^6.6.0",
  "vue": "^2.5.17",
  "vue-i18n": "^8.8.1",
  "vue-router": "^3.0.2",
  "vue-spinners": "^1.0.2"
},

어떻게 해야 되죠?

아, 창피할 정도로 간단해, 내가 변했어요.

import i18n from './plugins/i18n'

로.

import {i18n} from './plugins/i18n'

이제 모든 게 잘 풀려요

만약 누군가 같은 문제로 여기 왔다면export default제 메인에는 이런 게 있었어요

import translations from './translations';

new Vue({
    translations,
    ...
}).$mount('#app');

여기서 translations/index.js는 플러그인과 모든 것을 정상적으로 로드합니다.정상적으로 동작하려면 , Import에 「i18n」의 이름을 붙여야 합니다.

import i18n from './translations';

new Vue({
    i18n,
    ...
}).$mount('#app');

src/i18n/index.module

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

Vue.use(VueI18n)


// 注册i18n实例并引入语言文件
const i18n = new VueI18n({
  locale: 'zh_cn',
  messages: {
    'zh_cn': require('@/assets/languages/zh_cn.json'),
    'en_us': require('@/assets/languages/en_us.json'),
    'es_ve': require('@/assets/languages/es-ve.json')
  }
})

export default i18n

main.discloss.main.discloss.

import i18n from '@/i18n'

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

Vue.protype._i18n = i18n은 App.mpType = 'app' 행 아래에 있어야 합니다.

App.mpType = 'app'
Vue.prototype._i18n = i18n

https://github.com/kazupon/vue-i18n/issues/276#issuecomment-663071363

저도 이 에러를 보고했지만, 위의 방법으로는 해결하지 못했습니다.결국 모달은 도입하면 안 된다는 것을 알게 되었습니다.해결하려면 , 다음의 코드를 삭제합니다.

import Modal from XXX

export default {
  components: {
    Modal
}

언급URL : https://stackoverflow.com/questions/54666293/vue-i18n-cannot-read-property-t-of-undefined-at-proxy-vue-t