Question

在将vue-i18n集成到我的应用程序时出现问题。以this page为灵感。

  <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.$t 在Chrome 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 webpack配置，并从npm安装了vue-i18n，并用作插件。

i18n.js（在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.js：

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')

package.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"
},

我需要做什么？

Answer 1

啊，令人尴尬的是，我改变了

import i18n from './plugins/i18n'

到

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

现在一切正常。

Answer 2

如果有人来这里遇到同样的问题，但使用的是export default，我在main.js中就会看到它：

import translations from './translations';

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

translations / index.js在何处加载了插件以及所有正常内容。显然，您必须将导入文件命名为“ i18n”，这样才能正常工作：

import i18n from './translations';

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

Answer 3

src / i18n / index.js

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.js

import i18n from '@/i18n'

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

Answer 4

Vue.prototype._i18n = i18n 必须在 App.mpType ='app' 行下

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

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

Answer 5

我也报告了此错误，但是我没有使用上述方法解决它。最后，我发现我们不应该引入模态。删除以下代码以解决：

 <button onclick="add()">add</button>
<div id="stringId"></div>
@section scripts {
    <script type="text/javascript">
        function add() {
            $.ajax({

                url: 'GetComments',
                data: { postId: 1 },
                dataType: 'json',
                cache: false,
                success: function (result) {
                    for (var i = 0; i < result.length; i++) {
                        var div = document.createElement("Div");
                        div.setAttribute('class', 'comment');
                        var image = document.createElement("img");
                        var imageSource = "/images/" + result[i].userImage;
                        image.src = imageSource;
                        div.appendChild(image);

                        var a = document.createElement('a');
                        var linkText = document.createTextNode(result[i].userName);
                        a.appendChild(linkText);
                        a.href = "UserProfile?username=" + result[i].userName;
                        div.appendChild(a);

                        $("#stringId").append(div);
                    }
                },
            });
        }
    </script>

}

Vue-i18n'无法读取Proxy.Vue。$ t中未定义的属性'_t'

5 个答案: