vue-i18n是一个针对于vue的国际化插件,使用非常简单,具体使用方式看我细细道来。

实现方式

1. 下载包
npm install vue-i18n
2. 配置

在main.js文件中加入如下配置

// 引入插件和语言包
import VueI18n from 'vue-i18n'
import zh from '@/i18n/langs/zh'
import en from '@/i18n/langs/en'
Vue.use(VueI18n) //实例化vue-i18n
const i18n = new VueI18n({ // 从本地存储中取,如果没有默认为中文,
// 这样可以解决切换语言后,没记住选择的语言,刷新页面后还是默认的语言
locale: localStorage.getItem('lang') || 'zh', messages: {
'zh': zh, // 中文语言包
'en': en // 英文语言包
}
}) // 将i18n实例挂载到vue上
new Vue({
el: '#app',
i18n,
router,
store,
template: '<App/>',
components: { App }
})
3. 创建中、英文包文件
创建两个文件,一个为zh.js代表中文,en.js代表英文,具体内容格式如下
//zh.js
export default {
nav: {
home: '首页',
monitor: '监控',
analyze: '分析',
alarm: '报警',
maintenance: '运维',
config: '配置',
device: '设备',
scada: '画面'
},
confirm: {
ok: '确认',
cancel: '取消',
content: '你确认要退出系统吗?',
logout: '退 出'
},
}
//en.js
export default {
nav: {
home: 'Home', //首页
monitor: 'Monitor', //监控
analyze: 'Analyze', //分析
alarm: 'Alarm', // 报警
maintenance: 'Maintenance', //运维
config: 'Config', //配置
device: 'Device', //设备
scada: 'Scada' //画面
},
confirm: {
ok: 'Logout', //退出
cancel: 'Cancel', //取消
content: 'Are you sure you want to quit the system?', //你确认要退出系统吗
logout: 'Logout' //
}
}
4. 在组件中使用

我们先看vue-i18n的模板语法

//第一种
<span v-text="$t('nav.home')"></span> //第二种
<span>{{$t('nav.home')}}</span>
5. 如何切换中英文

关于这点,vue-i18n给我们提供了一个全局变量locale,通过他我们可以查看当前使用的语言,也可以通过他改变当前使用的语言;

具体用法:

// 查看当前使用的语言
console.log(this.$i18n.locale) // 改变当前使用的语言
this.$i18n.locale = 'en' // 将当前使用的语言切换到英文

一般在项目中,我们会使用如下方式切换语言

// 切换语言按钮
<v-list-tile @click="onChangeLang">
<v-list-tile-title>中文 / EN</v-list-tile-title>
</v-list-tile>
<v-list-tile @click="onLogOutClick">
<v-list-tile-title >{{$t('confirm.logout')}}</v-list-tile-title>
</v-list-tile> // 切换方法onChangeLang的处理, 这里的弹出框是element-ui的组件
onChangeLang() {
this.$confirm(this.$t('changeLang.content'), this.$t('changeLang.tip'), {
confirmButtonText: this.$t('changeLang.ok'),
cancelButtonText: this.$t('confirm.cancel'),
type: 'warning'
})
.then(() => {
let lang = this.$i18n.locale
if (lang === 'zh') {
this.$i18n.locale = 'en'
// 对应main.js配置文件中的localStorage的get方法
localStorage.setItem('lang', this.lang)
} else {
this.$i18n.locale = 'zh'
localStorage.setItem('lang', this.lang)
}
})
.catch(() => {})
}

可能会遇到的问题

1. 记不住切换后的语言

就是我们切换语言后,刷新又是默认语言,这点我们在上面已经用本地存储localStorage解决了;

2. 将this.$t() 写到了data属性里,切换语言不起作用
data是一次性生产的,你这么写只能是在 data 初始化的时候拿到这些被国际化的值,并不能响应变化。

官方的解决办法是,建议我们将表达式写到computed属性里,不要写到data里

3. 后台获取过来的动态数据,在切换国际语言后不起作用

在witch中监听 i18n语言变化,重新调取接口。

4. 注意拷贝后数组中的数据,在切换国际化时不管用,因为浅复制只拷贝了之前没变的数据。

部分内容摘自:
作者:LeonWuV
来源:CSDN
https://blog.csdn.net/wxl1555/article/details/85112530

vue-i18n国际化在data中切换不起作用的更多相关文章

  1. Vue beaforeCreate时获取data中的数据

    异步获取即:通过    $this.$nextTick或者settimeout,这连dom都可以拿出来 beforeCreate() { this.$nextTick(function() { con ...

  2. Element + Vue I18n动态import加载国际化语言包翻译文件

    需求 项目为多页应用,包含产品a.b.c.d.e,每个产品都有自己的翻译文件.一次加载所有翻译文件是极度不合理的.于是考虑动态加载. 实现 参考官方文档:延迟加载翻译 项目结构 │ ├── dist ...

  3. vue+element-ui国际化(i18n)

    1. 下载element-ui和vue-i18n: npm i element-ui --save   npm i vue-i18n –save 2.  创建一个  i18n 文件夹, 在main.j ...

  4. vue第四单元(初识vue-在页面中直接引入vue框架-学习使用vue语法-vue的指令-介绍data用法-methods用法)

    第四单元(初识vue-在页面中直接引入vue框架-学习使用vue语法-vue的指令-介绍data用法-methods用法) #课程目标 了解 vue 框架的特点 掌握创建 vue 实例 掌握 data ...

  5. vue filters中使用data中数据

    vue filters中 this指向的不是vue实例,但想要获取vue实例中data中的数据,可以采用下面方法.在 beforeCreate中将vue实例赋值给全局变量app0,然后filters中 ...

  6. vue 需求 data中的数据之间的调用

    我遇到过这种情况  就是在我的data中 会有数据调用data中的其他数据 如图  我的alertInfoType需要拿到screeningCondition中type的值 用过vue的都知道 我是不 ...

  7. Vue 在beaforeCreate时获取data中的数据

    众所周知,vue在beforecreate时期是获取不到data中的 数据的 但是通过一些方法可以实现在beforecreate时获取到data中的数据 暂时想到两种放发可以实现,vue在before ...

  8. vue调用组件,组件回调给data中的数组赋值,报错Invalid prop type check failed for prop value. Expecte

    报错信息: 代码信息:调用一个tree组件,选择一些信息 <componentsTree ref="typeTreeComponent" @treeCheck="t ...

  9. vue—data中变量和字符串拼接

    #变量和字符串的拼接# 写项目中,遇到了这样的一个问题:怎样在一个div里面显示两个data中的数据?我的问题描述清楚了吗?... 看图吧:   这是用户最初的需求~  这是用户后来的需求,嗯……就是 ...

随机推荐

  1. c++入门之函数指针和函数对象

    函数指针可以方便我们调用函数,但采用函数对象,更能体现c++面向对象的程序特性.函数对象的本质:()运算符的重载.我们通过一段代码来感受函数指针和函数对象的使用: int AddFunc(int a, ...

  2. Saltstack 安装配置详解

    下面这篇文章主要介绍另外一个运维自动化工具 Saltstack . 一.简介 Saltstack 比 Puppet 出来晚几年,是基于Python 开发的,也是基于 C/S 架构,服务端 master ...

  3. vue生命週期

    https://www.cnblogs.com/fly_dragon/p/6220273.html https://www.cnblogs.com/fly_dragon/p/6220273.html

  4. Python——列表、元祖、字典 操作方法

    一.编码方式占位 1.ASCII码:字母.数字.特殊字符,1个字节占8位 2.Unicode:字母 2字节占16位  /  中文 4字节 占32位 3.UTF8:字母 1字节占8位 / 欧洲 2字节占 ...

  5. [模板] dp套dp && bzoj5336: [TJOI2018]party

    Description Problem 5336. -- [TJOI2018]party Solution 神奇的dp套dp... 考虑lcs的转移方程: \[ lcs[i][j]=\begin{ca ...

  6. 在Magento 2中创建管理员菜单

    在Magento 2中创建管理员菜单 第1步:创建menu.xml 第2步:添加菜单项 第3步:刷新Magento缓存 第1步:创建menu.xml 创建名为:menu.xml文件的管理菜单文件 ap ...

  7. oracle 查询数据库的各种命令

    以下查询都是使用plsql查询oracle 11g 1.查询数据库版本信息 select * from v$version; 2.查询数据库优化模式 select name, value from v ...

  8. JS输入框统计文字数量

    $('#articleTitle').bind('input propertychange',function () { var a = $(this).val().length; if(a>3 ...

  9. 模型评估【PR|ROC|AUC】

    这里主要讲的是对分类模型的评估. 1.准确率(Accuracy) 准确率的定义是:[分类正确的样本] / [总样本个数],其中分类正确的样本是不分正负样本的 优点:简单粗暴 缺点:当正负样本分布不均衡 ...

  10. Docker:容器的四种网络类型 [十三]

    一.None类型 简介:不为容器配置任何网络功能,--net=none 1.创建容器 docker run -it --network none busubox:latest 2.功能测试 [root ...