使用vue-i18n 插件

Moon Sun.

已于 2022-12-06 20:14:37 修改

阅读量200

点赞数

文章标签： vue.js javascript 前端

于 2022-12-06 18:52:45 首次发布

本文链接：https://blog.csdn.net/weixin_48079717/article/details/128196565

版权

使用vue-i18n 插件

vue2使用8版本

vue3使用9的版本（最新）

1.安装

2. 配置文件

import Vue from 'vue'
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
import Element from 'element-ui'
import en from 'element-ui/lib/locale/lang/en'
import zh from 'element-ui/lib/locale/lang/zh-CN'
// 准备翻译的语言环境信息
const messages = {
    myen: {
        home: {
            hello: 'hello world',
           
        },
        ...en
    },
    myzh: {
        home: {
            hello: '你好 世界'
        },
        ...zh
    }
}
Vue.use(Element, {
    i18n: (key, value) => i18n.t(key, value)
  })
// 通过选项创建 VueI18n 实例
const i18n = new VueI18n({
    locale: 'myen', // 设置地区
    messages, // 设置地区信息
})
 
 
export default i18n

三、导入

在这里插入图片描述

四、应用

 {{$t('home.totalmoney')}}
 (1)在标签内作为正文内容
<div class="title">{{$t('menu.home')}}</div>
 
(2)作为标签属性使用
<input :placeholder="$t('content.main')" type="text">