vue项目国际化 vue-i18n以及踩坑解决小姐姐手把手教你VUE国际化~

1.安装配置

- 安装 $ npm install vue-i18n

或者：

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-i18n/dist/vue-i18n.js"></script>

import VueI18n from 'vue-i18n'Vue.use(VueI18n) // 通过插件的形式挂载const i18n = new VueI18n({locale: 'zh-CN',    // 语言标识fallbackLocale: 'zh-CN',//没有英文的时候默认中文语言silentFallbackWarn: true,//抑制警告//this.$i18n.locale // 通过切换locale的值来实现语言切换messages: {'zh-CN': require('./common/lang/zh'),   // 中文语言包'en-US': require('./common/lang/en')    // 英文语言包}
})window.vm = new Vue({el: '#app',i18n,  // 不要忘记store,router,template: '<App/>',components: { App }
})

--- ok, 引入的事情就是这样，那么既然实现国际化，这边简单的是中英文切换，那么自然我们需要中英文两套语言的文件，vue-i18n中相对简单，只需要两个 js 文件，通过 require 的形式引入到 main.js。

en.js 英文语言包：

export const lang = { test: 'English',//英文
}

zh.js 中文语言包：

export const lang = {test:'中文',
}

最后我们只需要通过触发事件的形式，来控制 locale 的值，去调用对应的语言包就可以实现国际化啦。

--- 组件中如何去切换 locale 的值，实现语言切换。

locale: 'zh-CN',    // 语言标识messages: {'zh-CN': require('./common/lang/zh'),   // 中文语言包'en-US': require('./common/lang/en')    // 英文语言包}

在 main.js 中的代码中，可以看到，当 locale 的值为‘zh-CN’时，版本为中文；当 locale 的值为‘en-US’,版本为英文。当然你也可以换成 zh 和 en，这个不固定，只需要对应上。

好了，现在来看一下，我组件中的一个点击事件中如何进行切换。

<div @click="changeLangEvent" class="changeLang"></div>changeLangEvent() {if ( this.lang === 'zh-CN' ) {this.lang = 'en-US';this.$i18n.locale = this.lang;//关键语句      }else {this.lang = 'zh-CN';this.$i18n.locale = this.lang;//关键语句      }}

2.语法

在vue文件里面的实现：

// 普通：
<span>{{$t('lang.test')}}</span>
// placeholder:
<input type="text" v-model="description" :placeholder=" $t('lang.test')" >
// 三目运算:
<span>{{flag?flag:$t('lang.test')}}</span>

在js代码里面调用多语言字段：

// TODO：写法:this.$t('lang.test');
// TODO：因为js里面的数据无法实时刷新，所以需要写在computed里面
computed:{testName: function () {return this.$t('lang.test');},}

---如果是双向绑定的数据，则需要set

computed:{mailAuthTxt: { //获取验证码--倒计时get() {if(this.isCountDown){return this.$t('dc_lang.获取验证码');} else {return this.countDown;}},set() {if(this.isCountDown){return this.$t('dc_lang.获取验证码');} else {return this.countDown;}}}
}

在common.js里面的写法:

//因为common.js没有在vue文件中。所以$t.('xxxx')写法会报错。所以在main.js中写
window.vm= new Vue({});window.vm.$i18n.t('lang.test');

问题1：在刷新页面之后，我的语言状态会恢复成原始状态。所以我采用了sessionStorage来存储我的语言状态。

//国际化
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)let lang = window.sessionStorage.getItem('lang')||'zh-CN';
const i18n = new VueI18n({locale: lang,    // 语言标识fallbackLocale: 'zh-CN',//没有英文的时候默认中文语言silentFallbackWarn: true,//抑制警告// this.$i18n.locale // 通过切换locale的值来实现语言切换messages: {'zh-CN': require('../static/js/lang/zh.js'),   // 中文语言包'en-US': require('../static/js/lang/en.js')    // 英文语言包}
})

changeLangEvent() {if ( this.lang === 'zh-CN' ) {this.lang = 'en-US';this.$i18n.locale = this.lang;//关键语句window.sessionStorage.setItem('lang', this.lang);}else {this.lang = 'zh-CN';this.$i18n.locale = this.lang;//关键语句window.sessionStorage.setItem('lang', this.lang);}}

问题2：修改index.html里的title

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta content="yes" name="apple-mobile-web-app-capable"><meta content="yes" name="apple-touch-fullscreen"><meta content="telephone=no,email=no" name="format-detection"><title>我的网站名</title>
</head>
<body>
<div id="app"></div>
</body>
<script>document.getElementsByTagName("title")[0].innerText = window.vm.$i18n.t('lang.我的网站名');
</script>
</html>

--- 之前在网上看到国际化的解决方案有四种。谷歌插件翻译很不准确，不考虑。中英文两套很费劲，不考虑。之前还写过freeMarker的翻译，后台返回给前端直接添加就好了。

有空去研究一下tran.js

就此就完成啦~~~给自己比心心~

vue项目国际化 vue-i18n以及踩坑解决小姐姐手把手教你VUE国际化~相关推荐

vue项目中更换tinymce版本踩坑
项目需求: vue项目中实现多图片批量上传功能问题: tinymce富文本编辑器的多图片批量上传插件支持版本:5.0.4+ 项目中现有的富文本编辑器版本:4.9.4 为实现这一功能选择更换tiny ...
Vue项目对接微信公众号踩坑日记
之前做项目都是pc端的,还是第一次做移动端项目,而且上来就要接入app 和微信公众号两个平台,最终查阅多方文档,耗费几周时间还是完成了项目,这篇文章也算是记录一下自己的完成思路以及一些想法,希望能帮到 ...
记一次成功把Vue2后台项目改造成Vite2的踩坑经历
文章目录前言一.项目背景 1.1.为什么要选择Vite 二.迁移前的准备 2.1.补全.vue后缀 2.2.移动public/index.html的位置 2.2.1.通过vite-plugin-h ...
POI导出Excel设置背景色踩坑,解决背景色全黑(无效)的问题及指定列添加背景色,自定义颜色
POI导出Excel设置背景色踩坑,解决背景色全黑的问题及指定列添加背景色,自定义颜色一.自定义颜色二.背景色全黑(无效)的问题解决![在这里插入图片描述](https://img-blog.cs ...
【填坑之旅】手把手教你如何用AndroidStudio上传自己的library到Jcenter库
[填坑之旅]手把手教你如何用AndroidStudio上传自己的library到Jcenter库前言:我们在使用AndroidStudio的时候,会经常用到第三方的代码库.引入第三方库的方式无非就是 ...
【Vue】Vue1.0+Webpack1+Gulp项目升级构建方案的踩坑路
最近半年在维护公司的一个管理后台项目,搭建之初的技术栈比较混乱,构建方案采用了Gulp中调用Webpack的方式,Gulp负责处理.html文件,Webpack负责加载.vue..js等.而在这一套构 ...
VUE 集成富文本编辑器及踩坑记录
一.查看 vue版本和vue cli版本首先要知道自己所使用的VUE 版本和脚手架(VUE CLI)版本这样自己无论是在百度的时候还是选择富文本编辑器对应版本的时候都方便很多 1.查看vue 版 ...
vue+vuex+leaflet Jest单测踩坑指南
环境 Vue CLI 3 TypeScript 3.1.4 Leaflet 1.3.4 相关文档 vue-test-utils.vuejs.org/zh/guides/#- 踩坑 1.iview按需引 ...
Vue项目中加载图片的坑
Vue项目中加载图片时,遇到的坑 1.当直接在标签中,使用图片路径,此时可以正常显示. <img src='img_src' /> 正常显示 2.当img标签的src属性为变量时,且该变量 ...

vue项目国际化 vue-i18n以及踩坑解决小姐姐手把手教你VUE国际化~

vue项目国际化 vue-i18n以及踩坑解决小姐姐手把手教你VUE国际化~相关推荐

最新文章

热门文章

vue项目国际化 vue-i18n以及踩坑解决 小姐姐手把手教你VUE国际化~

vue项目国际化 vue-i18n以及踩坑解决 小姐姐手把手教你VUE国际化~相关推荐

最新文章

热门文章

vue项目国际化 vue-i18n以及踩坑解决小姐姐手把手教你VUE国际化~

vue项目国际化 vue-i18n以及踩坑解决小姐姐手把手教你VUE国际化~相关推荐