vue-i18n插件的作用

vue-i18n插件可以实现项目的语言切换功能

使用插件

vue3.0版本,考虑到兼容性需要安装对应版本 npm i vue-i18n@9 or npm i vue-i18n@next

插件配置

在项目src目录下面新建文件夹：i18n，在文件夹中创建index.js文件，进行配置

import { createI18n } from 'vue-i18n/index'; 
import zh_CN from './zh-CN.js';
import en_US from './en-US.js';

const messages = {
    zh_CN,
    en_US,
};

const localeData = {
    locale: localStorage.getItem('locale') || 'zh_CN',
    globalInjection: true, // 全局注册 $t方法
    legacy: false,
    // warnHtmlMessage: false,
    messages,
};

export const i18n = createI18n(localeData);

注意： 1.globalInjection: true 为全局引用 $t,引入之后可以在vue模板直接使用$ t，在选项式api中，在data或者计算属性中使用需要加this.$t('xxxxx')。注意在组合式api中使用由于没有this，需要引入i18n，使用 i18n.global.t('xxxx')的方式使用。

import { i18n } from '@/i18n';
xxxx: i18n.global.t('xxxxx'),

legacy: false, 为支持选项式api

配置语言

可以在i18n文件夹下面新建不同语言对应的文件，例如zh_CN.js、en_US.js。在各自的文件中进行配置。

zh_CN.js
header: {
        logout: '退出',
    },
    
en_US.js
header: {
        logout: 'Sign out',
    },

配置完后引入index.js定义在message属性中。

全局配置

将index.js中的i18n暴露出去，在main.js中引入使用。

import { i18n } from '@/i18n';
app.use(i18n);

至此插件已经配置完毕。

关于报错

main.js里面app.use(i18n)报错，可能是因为兼容性，或者是npm包错误，可以卸载node_modules包重新安装试试。

插件使用

在vue模板中直接使用

插值直接{{$t('xxxxxx')('header.logout')}}

<div>{{$t('header.logout')}}</div>

placeholder,等

<input  placeholder='请输入关键词'/>

<input  :placeholder='$t('xxxxxx')'/>

js文件中

js文件中需要引入i18n

import { i18n } from '@/i18n';
const logout={
    name:i18n.global.t('xxxxxx')
}

选项式api的data或者计算属性中

data(){
    return{
        logout:this.$t('xxxxxx')
    }
},
computed:{
    logout(){
        return this.$t('xxxxxx')
    }
}

组合式api中，需要引入i18n

import { i18n } from '@/i18n';
let name = i18n.global.t('xxxxxx')

Vue国际项目——Vue-i18n的基本使用