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. vue中使用LESS、SASS、stylus

    less的使用 npm install less less-loader --save 修改webpack.config.js文件.vue.cli 搭建项目可跳过此步 { test: /\.less$ ...

  2. Eclipse 查看 WebService 服务请求和响应消息

    每个WebService 对入参和返参都是有自己的要求的:别人调用我的WebService,需要按照我的要求进行传参.当我返回数据时,我也得告诉别人,我的返回数据是怎样组织的,方便别人读取. 那怎样查 ...

  3. centos7之vsftp安装和使用

    日常用作中,我们常用的是windows的共享,但是我们都知道windows运行不稳定.原来我们用的是centos6.5上的vsftpd,最近决定把centos6.*上的服务都移植到centos7上,好 ...

  4. 使用chrome开发者工具中的network面板测量网站网络性能

    前面的话 Chrome 开发者工具是一套内置于Google Chrome中的Web开发和调试工具,可用来对网站进行迭代.调试和分析.使用 Network 面板测量网站网络性能.本文将详细介绍chrom ...

  5. 利用window.performance.timing进行性能分析

    性能分析... window.performance.timing中相关属性语义: // .navigationStart 准备加载页面的起始时间 // .unloadEventStart 如果前一个 ...

  6. spring boot简单的小demo(适合于初学者)

    import com.example.demo2.com.example.dao.ShopDao; import com.example.demo2.com.example.entity.Shops; ...

  7. AWS设置允许root登陆

    Refer to the following to set root login: sudo -s (to become root) vi /root/.ssh/authorized_keys Del ...

  8. Node.js修改全局安装默认路径

    因为苦于C盘不够的烦恼,不想把全局安装包的路径弄在C盘,于是有了这篇文章: 查看设置 npm config ls //查看设定信息,,找到prefix一行,默认是一般是在C盘 修改命令如下 npm c ...

  9. Lua语法基础(一)

    1. 注释 -- 单行注释 --[[ 多行注释 --]] 2. 运行方式     (1)交互式运行         命令行下 lua进入交互模式     (2)命令行运行         lua + ...

  10. 行为驱动开发BDD和Cucunber简介

    测试驱动开发(TDD) 1.测试驱动开发,即Test-Driven Development(TDD),测试驱动开发是敏捷开发中的一项核心实践和技术,也是一种设计方法论.TDD的原理是在开发功能代码之前 ...