使用vue-i18n切换中英文-网页语言切换案例-vue文件中或路由(Router)文件中使用

Posted 2022-09-03 JackieDYH

vue-i18n地址

安装

npm install vue-i18n

使用

在 main.js 中引入 vue-i18n （前提是要先引入 vue）

import VueI18n from 'vue-i18n'

Vue.use(VueI18n)

准备本地的翻译信息

const messages = 
    zh: 
      message: 
        hello: '好好学习，天天向上！'
      
    ,
    en: 
      message: 
        hello: 'good good study, day day up!'//study hard and make progress every day!
      
    

创建带有选项的 VueI18n 实例

const i18n = new VueI18n(
    locale: 'en', // 语言标识
    messages
)

把 i18n 挂载到 vue 根实例上

const app = new Vue(
    router,
    i18n,
    ...App
).$mount('#app')

html 模板中使用

<div id="app">
    <h1 style="font-size: 16px; text-align: center;"> $t("message.hello") </h1>
</div>

运行效果

刚才选定的语言标识是 “en” 英语，现在改成 “zh” 中文，并查看效果

这样就可以轻松实现国际化了，实际开发中，页面内容肯定是很多的，我们可以把对应语言的信息保存为不同的 json对象

方法一(♥)：

i18n.js

// 配置
import Vue from 'vue'
import VueI18n from 'vue-i18n';
Vue.use(VueI18n) // 通过插件的形式挂载//中 cn 英 us
export const i18n = new VueI18n(
    locale: localStorage.getItem('language') || 'cn',
    //this.$i18n.locale // 通过切换locale的值来实现语言切换
    messages: 
        'cn': require('./zh.json'), // 中文语言包
        'us': require('./en.json'), // 英文语言包
    
);
// console.log(i18n, 'i18n')
// 重新封装方法
export function $t(args) 
    return i18n.tc.call(i18n, args);

//zh.json

    "home":
        "neirong":"内容",
        "dyh":"单引号"
    


//en.json

    "home":
        "neirong":"content",
        "dyh":"Jackie"
    

main.js

// 引入语言转换
// import VueI18n from 'vue-i18n';
// Vue.use(VueI18n);
import  i18n  from './common/languages/i18n.js'

new Vue(
  i18n,
  render: h => h(App)
).$mount("#app");

使用

<template>
  <div class="wrap">
    <button @click="btn('cn')">中文/cn</button>
    <button @click="btn('us')">英文/us</button>
    <p class="pm">$t("home.dyh")-$t("home.neirong")</p>
  </div>
</template>

<script>
export default 
  mounted()
    console.log(this.$t)
  ,
  methods: 
    btn(t) 
      console.log("获取",t);
      localStorage.setItem("language", t);
      // 刷新当前页面
      location.reload();
      this.$router.go(0);
    ,
  ,
;
</script>

<style lang="less" scoped>
.pm
  font-size: 26px;

</style>

拓展-路由文件-store-confirm-i18n

集成的vue-router,在router文件夹里的index.js中是用不了this.$t('xxxxx')这样的翻译和this.$confirm()这样的组件的

1.路由中使用store的方法：
router.app.$store

2.路由中使用elment-ui组件的方法：
 Vue.prototype.$confirm()

3.路由中使用i18n国际化翻译的方法
//import i18n from "../i18n";
import  i18n,$t  from '@/common/languages/i18n.js'
i18n.t('CommonBtn.Confirm')
或
$t('CommonBtn.Confirm')

---

有时候在data中使用

语言不能及时刷新，可以使用监听重新赋值实现，或者写在计算属性中返回使用

<template>
  <div>
    <div class="solutions"> solutions </div>
  </div>
</template>
 
<script>
export default 
  watch: 
    '$store.state.lang'(language) 
      this.init()
    
  ,
  data() 
    return 
      solutions : this.$t('solutions')
    
  ,
  created() 
    this.init()
  ,
  methods: 
    init()
      this.solutions = this.$t('solutions')
    
  ,

</script>

方法二： 

const i18n = new VueI18n(
    locale: 'en',  // 语言标识
    messages: 
        'zh': require('./common/lang/zh'),
        'en': require('./common/lang/en')
    
)

//zh.js
// 注意：一定是 exports，不是 export，否则会报错，报错信息是下列的中的内容不是 string
module.exports = 
    message: 
        title: '运动品牌'
    ,
    placeholder: 
        enter: '请输入您喜欢的品牌'
    ,
    brands: 
        nb: '新百伦',
        ln: '李宁'
    

//en.js
module.exports = 
    message: 
        title: 'Sport Brands'
    ,
    placeholder: 
        enter: 'Please type in your favorite brand'
    ,
    brands: 
        nb: 'New Banlance',
        ln: 'LI Ning'
    

在HTML 模板中使用，要特别注意在 js 中的国际化写法

// HTML
<div id="app">
    <div style="margin: 20px;">
      <h1>$t("message.title")</h1>
      <input style="width: 300px;" class="form-control" :placeholder="$t('placeholder.enter')">
      <ul>
        <li v-for="brand in brands">brand</li>
      </ul>
    </div>
</div>

// JS
data () 
    return 
      brands: [this.$t('brands.nike'), this.$t('brands.adi'), this.$t('brands.nb'), this.$t('brands.ln')]
    
 ,

在上面的操作中，我们都是通过手动修改 locale 的属性值来切换语言，实际上，更希望浏览器自动识别，这里可以借助于 cookie

新建一个 cookie.js 文件，用于读取cookie

function getCookie(name,defaultValue) 
  var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
  if (arr = document.cookie.match(reg))
    return unescape(arr[2]);
  else
    return defaultValue;


export 
  getCookie

在 main.js 中引入这个js，并通过 PLAY_LANG 属性来获取浏览器的语言

const i18n = new VueI18n(
    locale: getCookie('PLAY_LANG','zh'),    // 语言标识
    messages: 
        'zh': require('./common/lang/zh'),
        'en': require('./common/lang/en')
    
)

注意

两个极易出错的地方

将 $t() 写成了 $()

json 中在同一个对象里有同名属性

vue-i18n 提供了一个全局配置参数叫 “locale”，通过改变 locale 的值可以实现不同语种的切换

---

案例

借用了 Element UI 的弹窗样式，上面的步骤不再赘述，直接上核心代码

// template
<h2>$t('test')</h2>
<button type="button" class="btn btn-success" @click="changeLocale">中文/EN</button>  




// js方法
changeLocale () 
    this.$confirm(this.$t('layer.toggle'), this.$t('layer.tips'), 
        confirmButtonText: this.$t('button.ok'),
        cancelButtonText: this.$t('button.cancel'),
        type: 'warning'
        ).then(() => 
           let locale = this.$i18n.locale
           locale === 'zh' ? this.$i18n.locale = 'en' : this.$i18n.locale = 'zh'
        ).catch(() => 
              this.$message(
                  type: 'info',
                  )      
        )
,

在配合 Element-UI 一起使用时，会有2个问题：

（1）、页面刷新后，通过按钮切换的语言还原成了最初的语言，无法保存

（2）、框架内部自带的提示文字无法更改，比如像时间选择框内部中的提示文字

关于第一个问题，可以在初始化VueI18n实例时，通过 localStorage 来为 locale 对象赋值

const i18n = new VueI18n(
  locale: localStorage.getItem('locale') || 'zh',
  messages 
)

在切换语言的时候可以缓存不同的语言选项，并且可以长期保存，不会因为刷新网页而改变locale 的属性值

<div class="lang">
	<el-dropdown>
	  <i class="iconfont icon-language4"></i>
	  <el-dropdown-menu slot="dropdown">
		<el-dropdown-item @click.native="toggleLang('zh')" :disabled="$i18n.locale == 'zh'">中文</el-dropdown-item>
		<el-dropdown-item @click.native="toggleLang('en')" :disabled="$i18n.locale == 'en'">English</el-dropdown-item>
	  </el-dropdown-menu>
	</el-dropdown>
</div>

toggleLang(lang) 
      if(lang == 'zh')
        localStorage.setItem('locale', 'zh')
        this.$i18n.locale = localStorage.getItem('locale')
        this.$message(
          message: '切换为中文！',
          type: 'success'
        )
       else if (lang == 'en') 
        localStorage.setItem('locale', 'en')
        this.$i18n.locale = localStorage.getItem('locale')
        this.$message(
          message: 'Switch to English!',
          type: 'success'
      )

关于第二个问题，更改Element 组件内部语言，这里还涉及到 手动处理 vue-i18n@6.x 兼容性问题。官网已经做了详细介绍，这里依葫芦画瓢跟着实现一下

//i18n.js

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import locale from 'element-ui/lib/locale';
import zh from './langs/zh'
import en from './langs/en'
import enLocale from 'element-ui/lib/locale/lang/en'
import zhLocale from 'element-ui/lib/locale/lang/zh-CN'


Vue.use(VueI18n)

const messages = 
  en: Object.assign(en, enLocale),
  zh: Object.assign(zh, zhLocale)


console.log(messages.zh)

const i18n = new VueI18n(
  locale: localStorage.getItem('locale') || 'zh',
  messages 
)


locale.i18n((key, value) => i18n.t(key, value)) //为了实现element插件的多语言切换

export default i18n

按照如上把国际化文件都整合到一起，避免main.js 中大段引入相关代码。main.js 中与 i18n 相关的就只剩两行代码

import i18n from './i18n/i18n'           // 1行

window.app = new Vue(
  el: '#app',
  router,
  store,
  i18n,                                 // 2行
  components:  App ,
  template: '<App/>'
)

效果