vue-i18n with vue-electron : TypeError: Cannot read property '_t' of undefined

Question

我使用 electron.js + vue.js 和插件 vue-electron、electron-window-manager 构建桌面应用程序。 现在我需要把 vue-i18n 和它的结构工作非默认方式...

例如。 mainwindow 类似于工具栏或主菜单。其他菜单 (windows) 由主菜单打开，使用这种技术组合 vue-i18n 无法正常工作。

这是一个回购： anderzilla/vue-electron!

我已经尝试过类似的解决方案 vue-i18n tutorial kazupon！ 但错误信息是：

[Vue warn]: Error in render: "TypeError: Cannot read property '_t' of undefined"

found in

---> <MenuConfig> at src/renderer/components/MenuConfig.vue
       <Clarity> at src/renderer/App.vue
         <Root>

和我的i18n.js

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

Vue.use(VueI18n);

const messages = {
    'pt' : {
        alterarsenha: 'Alterar Senha',
        grupos: 'Grupos',
        pausas: 'Pausas',
        disponivel: 'Disponibilidade',
        sair: 'Sair',
    },
    'en' : {
        alterarsenha: 'Change Password',
        grupos: 'Groups',
        pausas: 'Pauses',
        disponivel: 'Disponibility',
        sair: 'Logout',
    },
    'es' : {}
};

const i18n = new VueI18n({    
    locale: 'pt', // set locale    
    fallbackLocale: 'en', // set fallback locale    
    messages, // set locale messages
});

在 main.js 代码中它就像 tuto 的 kazupon

在模板中（其他 window 由 electron-window-manager 创建）

<template>
  <main id="menu-config">
    <v-row>
      <div class="col-md-4" id="menu-config">
        <div class="menu-config">
          <ul @mouseleave="close">
            <li>
             <button @click="alterarSenha" class="titulo" >{{ $t('alterarsenha') }} - Alterar Senha</button>
            </li>

问题是“$t”...

我只需要这个用于 i18n 应用程序。

Answer 1

我修好了！问题在于声明组件的顺序。

new Vue({ 
components: { App }, 
i18n, 
router, 
store, 
template: "<App/>" 
}).$mount("#app"); 

i18n 必须在路由器之前！