Vue i18n国际化在实际项目中的使用

首先是在index.js文件中引入:

import VueI18n from 'vue-i18n';

Vue.use(VueI18n);
// 挂载在windows的全局变量用来判断语言
const lang = window.TI_CONFIG && window.TI_CONFIG.lang || 'zh';
/**
* 这里导出主要是在文件中的变量使用的情况
*/
export const i18n = new VueI18n({
  locale: 'en', // 语言标识 //this.$i18n.locale // 通过切换locale的值来实现语言切换
  messages: {
    'zh': require('../../locales/zh-cn.json'),//语音包的路径
    'en': require('../../locales/en-us.json'),
  }
});

export async function mount() {
    if (window.tmpMonaco) {
        window.monaco = Object.assign({}, window.tmpMonaco)
        delete window.tmpMonaco
    }
    generateRouter(store, (router) => {
        /* eslint-disable no-new */
        instance = new Vue({
            i18n,
            el: '#app',
            router,
            store,
            template: '<App/>',
            components: { App }
        });
    });
}

在props中使用的情况

<template>
<div>
</div>
</template>
<script>

  import { i18n } from '@/modules/index/entry';

  // 一般有以下2种写法

export default {
    name: 'Select',
    props: {
       title: {
            type: String,
            default() {
              return this.$t('components.Select.59bxl4zlamo0');
            }
        },

　　　　　　config: {

            type: Object,

            default: {

                DeployStatus: i18n.t('components.ItemModel.596p6fryn800'),

            }

        },

    },
    data() {
      return {
      };
    },
    computed: {
    },
    watch: {
    },
    // beforeCreate() {},
    created() {
    },
    // beforeMount() {},
    mounted() {
    },
    // beforeUpdate() {},
    // updated() {},
    // beforeDestroy() {},
    // destroyed() {},
    methods: { 
     }
};
</script>

在html中使用

一般有以下2种情况
<Button>{{$t('AppContent.AppDetail.59s0pr9er2w0')}}</Button>
<PureTextRow:label="$t('AppContent.AppBasicInfo.59s0p199d9k0')"/>

在文件中使用，以及对象变量中使用

import { i18n } from '@/modules/index/entry';//这个路径就是刚在index中导出的那个变量

export const getOperationListByRow = (row) => {
  return [
    {
      $name: 'publish',
      $text: i18n.t('AppContent.utils.59sjyor6xm00'),
      $disabled: row.Status === 'PUBLISHED'
    },
    {
      $name: 'unPublish',
      $text: i18n.t('AppContent.utils.59sjyor6z480'),
      $disabled: row.Status === 'ENABLED'
    },
    {
      $name: 'delete',
      $text: i18n.t('AppContent.utils.59sjyor6zd80'),
      $disabled: row.Status === 'PUBLISHED',
    }
  ];
}