如何在组件的脚本部分使用 vue-i18n 翻译功能

Question

我正在使用laravel-vue-i18n-generator包来处理我的laravel项目中vuejs组件中的文本翻译。我已经设置了应用程序.js如下所示：

import VueInternationalization from 'vue-i18n';
import Locale from './vue-i18n-locales.generated';
Vue.use(VueInternationalization);
const lang = 'fa';
const i18n = new VueInternationalization({
    locale: lang,
    messages: Locale
});
const app = new Vue({
    el: '#app',
    i18n,
});

在组件中：

<template>
    <a href="#" class="tip" title="" :title="$t('component.delete.title')" @click.prevent="deleteAction">
        <i :class="icon"></i>
    </a>
</template>
<script>
    import swal from 'sweetalert';
    import axios from 'axios';
    export default {
        inject: ['$i18n'],
        props:{
            endpoint: {
                type: String,
                required: true,
            },
            icon: {
                type: String,
                default: 'fa fa-trash'
            },
            message: {
                type: String,
                default:  this.$i18n.t('component.delete.are_you_sure'),
            },
            confirm: {
                type: String,
                default:  this.$i18n.t('component.delete.confirm'),
            },
            cancel: {
                type: String,
                default:  this.$i18n.t('component.delete.cancel'),
            },
            success: {
                type: String,
                default:  this.$i18n.t('component.delete.success'),
            },
            failed: {
                type: String,
                default:  this.$i18n.t('component.delete.failed'),
            },
        },
        mounted() {
            console.log(this);
        },
        methods:{
            deleteAction(){
                const vm = this;
                swal({
                    text: this.message,
                    buttons: {
                        catch: {
                            text: this.confirm,
                            value: "delete",
                        },
                        cancel: this.cancel
                    },
                    dangerMode: true
                }).then(name => {
                    if (!name) return false;
                    axios.delete(vm.endpoint)
                        .then(function (response) {
                            swal( vm.$i18n.t('component.delete.congrats'),vm.success, 'success').then(() => {
                                location.reload();
                            });
                        })
                        .catch(function (error) {
                            swal( vm.$i18n.t('component.delete.error'), vm.failed, 'error');
                        });
                });
            }
        }
    }
</script>
<style scoped>
</style>

幸运的是$t('component.delete.title')模板部分正常工作，但在脚本部分，我遇到了此错误：

未

捕获的类型错误：无法读取未定义的属性"t">

我哪里出错了？

Answer 1

这在组件的脚本部分对我有用：

this.$t('message')

Answer 2

在 vue 中.js如果你收到类似

"_vm.翻译不是一个函数"> 很可能您尚未导入包含翻译方法的 i18n 包。当您尝试使用 v-bind 将翻译添加到 html 属性时，有时会发生此错误。例：

 <a-form-item class="mb-0" :label="`${translate('person_name.firstname')}`">

以下步骤可以解决此错误。

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.0/vue.js"></script>
<script lang="ts">
import { translate, i18n } from '@/i18n';
@Component({
  components: {
    AgIconBase
  },
 methods:{
   translate
   }
})
</script>

Answer 3

这对我有用。

我有一个带有索引的区域设置文件夹.js导入我使用的两种语言文件，在此文件中添加。

global.$t = Vue.t

在脚本部分中直接称为

return $t('backend.faq.main')

Answer 4

我刚刚遇到了类似的问题，无法获取 i18n 的值.js。我的设置是一个带有createI18n函数的i18n.js文件，我在其中输入了一些消息：

import { createI18n } from "vue-i18n";
const i18n = createI18n({
    locale: "en",
    messages:{
        en:{
            // LOGIN //
            signIn: "Sign in",
        },
    }
});
export default i18n;

在我的主目录中.js我导入文件并使用它(app.use(i18n((

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router'
import store from './store'
import i18n from './locales/i18n'
window.$store = store
const app = createApp(App)
app.use(router)
app.use(i18n)
app.use(store)
app.mount('#app')

在组件中，我也导入了文件。然后我用 i18n.global.t('keyname'( 调用值

import { onMounted, ref } from 'vue'
import i18n from '../locales/i18n'
export default {
    name: 'WebRTC',
    setup(){
    console.log(i18n.global.t('incomingCall'))
    }
}