vue中i18n的安装与几种使用方式详解

目录
  • vue中i18n安装
  • 项目中的使用
    • 使用方式 组件里使用
    • 使用方式js
  • 总结

介绍 Vue I18n 是 Vue.js 的国际化插件。它可以轻松地将一些本地化功能集成到你的 Vue.js 应用程序中。

vue中i18n安装

1、在项目中安装i18n

npm install vue-i18n

2、如果在一个模块系统中使用它,你必须通过 Vue.use() 明确地安装 vue-i18n:

import Vue from 'vue'
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)

项目中的使用

我们在项目中最多的是通过标签切换来转换语言的显示,

locale是控制显示语言的配置

this.$i18n.locale=‘cn’

下面是完整的代码

文件夹路径

创建i18n文件夹放入你需要的语言和index.js文件

index代码

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

//引入element的语言包
import localeLib from 'element-ui/lib/locale'  //本地
import enLocale from "element-ui/lib/locale/lang/en"; //英文
import zhLocale from "element-ui/lib/locale/lang/zh-CN";  //中文

// 引入需要语言包也可是js文件,export default抛出语言包的对象
import en from './lang/saas-en.json'
import zh from'./lang/saas-zh-CN.json'

Vue.use(VueI18n)

//获取本地选择的语言
var lang =
  Cookie.get("bx_user_lang") ||
  navigator.language ||
  navigator.userLanguage ||
  "en";
const i18n = new VueI18n({
  locale: lang, // 语言标识
  fallbackLocale: 'zh-CN',
  messages: {
    en: Object.assign(en, enLocale),
    "zh-CN": Object.assign(zh, zhLocale)
  }
})
// 设置语言
localeLib.i18n((key, value) => i18n.t(key, value))
export default i18n

main.js

import i18n from './i18n/i18n';
/* eslint-disable no-new */
new Vue({
    el: '#app',
    router,
    store,
    i18n, //很重要,别忘记
    components: { App },
    template: '<App/>'
})

使用方式 组件里使用

<template>
    <div>
        <span>{{$t('message.text')}}</span> //使用方式1
        <p>{{title}}</p> //使用方式3
        <span v-text="$t('message.text')"></span>//使用方式2
        <el-select @change="langChange" placeholder="请选择语言">
            <el-option v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
        </el-select>
    </div>
</template>

<script>
export default {
    data () {
        return {
            title:this.$t('message.text'),
            options:[
                { value: 'cn', label: '中文' },
                { value: 'en', label: 'English' }
            ]
        }
    },
    methods: {
        //语言切换
        langChange(e){
            localStorage.setItem('lang',e);
            this.$i18n.locale = e;
            window.location.reload()
        }
    }
}
</script>

使用方式js

vue3中在页面js使用有点不同 $t() 会挂载到proxy上,在js中使用proxy.$t()

 // 删除人员
      const delMenu = async (row) => {
         await deletePerson(row)
         proxy.$message.success(proxy.$t("person.message.success.delete"))

      }

如果组件里没有proxy呢

先定义一个转换的方法translateTitle()

创建一个i18n.ts,写入下面代码,返回一个translateTitle

import i18n from "@/i18n";
export function translateTitle(title: string) {
    const { t, te } = i18n.global
    if (te(`${title}`)) return t(`${title}`)
    return title;
}

组件中使用,方法还是一样,是用自己定义的方法translateText,代替了proxy.$t.代码如下

import { translateText } from "@/utils/i18n" //在组件中引入
import { ElMessage } from 'element-plus'
const tots=()=>{
	ElMessage.success(translateText('person.message.success'))
}

最后附上官方文档的地址

https://kazupon.github.io/vue-i18n/zh/

总结

到此这篇关于vue中i18n的安装与几种使用方式的文章就介绍到这了,更多相关vue中i18n安装与使用内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • vue-i18n实现中英文切换的方法

    1.下载 npm install vue-i18n 2.创建中英文包 2.1 中文包 2.2 英文包 3.在main里面引入 import VueI18n from "vue-i18n"; Vue.use(VueI18n); const i18n = new VueI18n({   locale:     localStorage.getItem("lang") == (undefined || "" || null)       ? "

  • vue使用i18n实现国际化的方法详解

    一.前言 在4k广告机中需要实现多语言切换,这时候接触到国际化,前端框架无数,其中几种热门的框架都有相匹配的国际化插件工具.比如: vue + vue-i18n angular + angular-translate react + react-intl jquery + jquery.i18n.property 在4K广告机项目中使用的前端框架为Vue,故而我们将使用vue-i18n这个插件进行国际化功能的实现. 二.最终实现效果 三.国际化的实现 1.首先在自己的项目中安装 vue-i18n

  • vue 使用vue-i18n做全局中英文切换的方法

    1.vue-i18n安装 npm install vue-i18n --save-dev 2.在main.js文件中引入 import VueI18n from 'vue-i18n'; Vue.use(VueI18n); const i18n = new VueI18n({ locale: localStorage.getItem('language')||'zh', //使用localStorage缓存到本地,当下次使用时可默认当前使用语言 messages: { ' zh': require

  • vue项目国际化vue-i18n的安装使用教程

    前言 项目需要支持多语言,我们需要提取出项目中使用的静态文本,使用语言包进行管理, 当切换语言设置的时候,可以自动切换整个项目的文字显示. 发现Vue项目中有对应的组件 vue-i18n ,而且对项目的代码修改不大,于是就使用了这个组件去修改项目中的代码.下面话不多说了,来一起看看详细的介绍吧. 安装 // script 引入 <script src="https://unpkg.com/vue/dist/vue.js"></script> <script

  • vue项目中使用vue-i18n报错的解决方法

    前言 Vue-i18n大家应该都不陌生,Vue-i18n安装的安装方法如下: npm install vue-i18n --save 然而最近在vue项目中使用vue-i18n的时候,居然报错了,通过查找相关的资料终于找到了解决的方法,下面话不多说了,来一起看看详细的介绍吧 发现问题 iview-admin框架克隆到本地,添加路由的时候,稍不注意就会遇到以下情况: Value of key 'xxx' is not string! Cannot translate the value of ke

  • vue使用vue-i18n实现国际化的实现代码

    需求 公司项目需要国际化,点击按钮切换中文/英文 1.安装 npm install vue-i18n --save 2.注入 vue 实例中,项目中实现调用 api 和 模板语法 import VueI18n from 'vue-i18n' Vue.use(VueI18n) ; const i18n = new VueI18n({ locale: 'zh-CN', // 语言标识, 通过切换locale的值来实现语言切换,this.$i18n.locale messages: { 'zh-CN'

  • 利用vue-i18n实现多语言切换效果的方法

    前言 有些项目我们需要支持多种语言切换,满足国际化需求. vue-i18n是一个vue插件,主要作用就是让项目支持国际化多语言,使用方便快捷,能很轻松的将我们的项目国际化.本文主要介绍使用vue-i18n实现切换中英文效果. 安装vue-i18n 我们使用npm安装vue-i18n. npm install vue vue-i18n --save 引入vue-i18n 首先在 main.js 中引入 vue-i18n. import Vue from 'vue' import App from

  • vue中i18n的安装与几种使用方式详解

    目录 vue中i18n安装 项目中的使用 使用方式 组件里使用 使用方式js 总结 介绍 Vue I18n 是 Vue.js 的国际化插件.它可以轻松地将一些本地化功能集成到你的 Vue.js 应用程序中. vue中i18n安装 1.在项目中安装i18n npm install vue-i18n 2.如果在一个模块系统中使用它,你必须通过 Vue.use() 明确地安装 vue-i18n: import Vue from 'vue' import VueI18n from 'vue-i18n'

  • 基于vue中对鼠标划过事件的处理方式详解

    鼠标事件进行监听 需求中,在一个table(组件)表中,对于其中一列(该列为图片列),当鼠标划过该列的某个单元格子(图片)时,需要展示出该单元格子对应的遮罩层 翻阅了一些博客,发现好多都提到了mouse事件,如mouseover.mouseout.mouseenter.mouseleave,在之后我自己也通过这种方法进行了尝试. <template> <el-table :data="tableData" stripe style="width: 100%&

  • Android编程中沉浸式状态栏的三种实现方式详解

    本文实例讲述了Android编程中沉浸式状态栏的三种实现方式.分享给大家供大家参考,具体如下: 沉浸式状态栏 Google从android kitkat(Android 4.4)开始,给我们开发者提供了一套能透明的系统ui样式给状态栏和导航栏,这样的话就不用向以前那样每天面对着黑乎乎的上下两条黑栏了,还可以调成跟Activity一样的样式,形成一个完整的主题,和IOS7.0以上系统一样了. 首先看下效果 首先看下第一种方式 系统的方式沉浸式状态栏实现 步奏一 //当系统版本为4.4或者4.4以上

  • AngularJS中关于ng-class指令的几种实现方式详解

    前言 开发中经常会遇到这样的需求,一个元素需要在不同的状态下呈现不同的样子,而在这所谓的的样子当然就是改变其css的属性,而实现动态的改变属性值,我们就需要实现动态的更换其class属性值. 在这给大家介绍三种方法来实现,大家可以根据自己的需求来选择方式,下面来看看. 第一种:通过数据的双向绑定(不推荐) <div ng-controller="firstController"> <div ng-class="{{className}}">&

  • vue路由传参三种基本方式详解

    这篇文章主要介绍了vue路由传参三种基本方式详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 现有如下场景,点击父组件的li元素跳转到子组件中,并携带参数,便于子组件获取数据. 父组件中: <li v-for="article in articles" @click="getDescribe(article.id)"> methods: 方案一: getDescribe(id) { // 直接调用$r

  • Vue 中指令v-bind动态绑定及与v-for结合使用详解

    目录 前言: 一. v-bind动态绑定class 1. v-bind动态绑定class(对象语法) 2. v-bind动态绑定class(数组用法) 3.v-bind动态绑定style(对象语法) 4.v-bind动态绑定style(数组语法) 二.v-bind和v-for的结合使用 前言: 在昨天的文章中已经基本介绍了,v-bind的基本使用,可以参考学习,本文是更加具体的解释v-bind的使用,和v-for结合的使用. 一. v-bind动态绑定class 1. v-bind动态绑定cla

  • MySql安装启动两种方法教程详解

    mysql安装启动两种方法如下所示: 方法一(简单版): 1.cmd进入mysql安装的bin目录:mysqld.exe –install 2.net start mysql 服务启动(或者选择计算机->(右键)管理->服务和应用程序->服务->mysql右键启动服务) 3.mysql –uroot –p 回车 4.password留空 回车 方法二: 1.cmd进入到mysql安装目录bin,如:D:\MySQL Server 5.6\bin 2.mysqld --console

  • 在vue中封装方法以及多处引用该方法详解

    步骤: 1.先建立一个文件,放你想封装的方法:然后导出: 部分代码: 注: 导出这个地方需要特别注意:如果是一个对象的话:export 对象:如果是一个函数的话:export { 函数 } 2.引入文件: 补充知识:vue uni-app 公共组件封装,防止每个页面重复导入 1.公共插件 实现目标,将公共组件或者网络请求直接在this中调用,不需要再页面引用 #例如网络请求 var _this = this; this.api.userInfo({ token: '' } #通用工具 _this

  • Spring中bean的初始化和销毁几种实现方式详解

    Bean的生命周期 : 创建bean对象 – 属性赋值 – 初始化方法调用前的操作 – 初始化方法 – 初始化方法调用后的操作 – --- 销毁前操作 – 销毁方法的调用. [1]init-method和destroy-method 自定义初始化方法和销毁方法两种方式:xml配置和注解. ① xml配置 <bean id="person" class="com.core.Person" scope="singleton" init-meth

  • VirtualBox中最小化安装Centos8.1虚拟机的教程详解

    1.下载相关工具与镜像 下载链接 VirtualBox: https://download.virtualbox.org/virtualbox/6.1.8/VirtualBox-6.1.8-137981-Win.exe Centos8.1: https://mirrors.tuna.tsinghua.edu.cn/centos/8.1.1911/isos/x86_64/CentOS-8.1.1911-x86_64-dvd1.iso 安装VirtualBox 这个与正常软件一样选好位置一路跟着走就

随机推荐