多语言设置

最新推荐文章于 2023-04-25 08:55:15 发布

weixin_30335575

最新推荐文章于 2023-04-25 08:55:15 发布

阅读量682

点赞数

文章标签： javascript 开发工具 ViewUI

原文链接：https://juejin.im/post/5d57bc23f265da03b8105cde

版权

编写时间：2019-08-17
更新时间：2019-08-17

作者：鬼小妞

备注：本文编写了与在electron-vue项目引用vue-i18n进行多语言设置，仅供参考，描述不当的地方，请评论指正

状态：已完成、待补充2019-08-17

[TOC]

前提

项目是使用以下命令一键式生成的electron-vue 的项目

vue init simulatedgreg/electron-vue my-project

在vscode里按ctrl+shift+v预览

多语言设置

在基于vue-cli项目开发过程中，多语言切换功能可使用vue-i18插件，具体实现方法如下

1、在项目中安装vue-i18插件


npm install vue-i18n --save-dev

复制代码

2、建立多语言文件夹和多语言入口文件和语言文件

在src\renderer\modules目录下新建文件夹lang，然后在该文件夹下建立index.js、zh_CN.js 、en_US.js

3、编辑多语言入口文件

在多语言入口文件src\renderer\modules\Lang\index.js

输入以下代码：


/*------------------------------------
*        导入vue和语言模块包
------------------------------------*/
import Vue from 'vue'
import VueI18n from 'vue-i18n'




/*------------------------------------
*      vue组件上使用语言包
------------------------------------*/

Vue.use(VueI18n)

/*------------------------------------
*            导入语言包
------------------------------------*/

import zh_CN from './zh_CN'  //导入包
import en_US from './en_US'



/*------------------------------------
*            设置语言配置
------------------------------------*/
const DEFAULT_LANG = 'zh_CN' // 默认语言（当前使用的语言）

const locales = { 
    'zh_CN': zh_CN,
    'en_US': en_US
}

export const i18n = new VueI18n({
  
    locale: DEFAULT_LANG,// 语言标识//this.$i18n.locale // 通过切换locale的值来实现语言切换,当 locale 的值为"zh-CN"时，版本为中文；当 locale 的值为"en-US",版本为英文。
    messages: locales,
})




/*------------------------------------
*            设置语言配置
对外提供一个setup方法，用来修改我们的语言；
由于需要兼容多语言样式，所以这里在body上加入了相应的类名，方便我们做样式定制
------------------------------------*/
export const langSetup = lang => {
    // if (lang === undefined) {
    //     lang = window.localStorage.getItem(LOCALE_KEY)
    //     if (locales[lang] === undefined) {
    //         lang = DEFAULT_LANG
    //     }
    // }
    // // window.localStorage.setItem(LOCALE_KEY, lang)

    Object.keys(locales).forEach(lang => {
        document.body.classList.remove(`lang-${lang}`)
    })
    document.body.classList.add(`lang-${lang}`)
    document.body.setAttribute('lang', lang)
    //把当前语言设置到vue的配置里面，方便在代码中读取
    Vue.config.lang = lang
    i18n.locale = lang
}


//把i18n绑定到window上，方便在vue组件以外的文件使用语言包
window.i18n = i18n;

复制代码

langSetup: 根据多语言设置来设置样式

4、在项目的入口文件main.js中引入vue-i18n插件

在入口文件：src\renderer\main.js

(1) 导入多语言入口文件


import { i18n, langSetup } from './modules/lang' //添加多语言i18n和根据多语言进行样式设置langSetup

复制代码

(2) 挂载到vue实例上


/* eslint-disable no-new */
new Vue({
  components: { App },
  router,
  store,
  i18n, //多语言i18n
  template: '<App/>'
}).$mount('#app')

复制代码

5、编辑语言文件

在zh_CN.js src\renderer\modules\Lang\zh_CN.js


  module.exports = {
    menu : {
      home:"首页"
    },
    content:{
      main:"这里是内容"
    }
  }

复制代码

在en_US.js src\renderer\modules\Lang\en_US.js


module.exports = {
  menu : {
     home:"home"
  },
  content:{
     main:"this is content"
 }
}

复制代码

6、使用多语言

1）在vue组件的标签内作为正文内容


<div class="title">{{$t('menu.home')}}</div>

复制代码

2)在vue组件的标签属性使用


<input :placeholder="$t('content.main')" type="text">

复制代码

3)在vue组件的`<script>`中文字使用时

console.log(this.$t('content.main'));
复制代码

4)待补充...

step4:页面上进行中英文切换，在中英文切换的按钮上绑定事件，如下：


tabEn: function () {
  this.$i18n.locale = 'en_US'
},
tabCn: function () {
  this.$i18n.locale = 'zh-CN'
}

复制代码

备注补充

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

1、新建一个 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
}


复制代码

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

然后修改i18n实例locale


const i18n = new VueI18n({
    locale: getCookie('PLAY_LANG','zh-CN'),    // 语言标识
    messages: {
        'zh_CN': zh_CN,
        'en_US': en_US
    }
})

复制代码

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

（1）、页面刷新后，通过按钮切换的语言还原成了最初的语言，无法保存
（2）、框架内部自带的提示文字无法更改，比如像时间选择框内部中的提示文字

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

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


const i18n = new VueI18n({
  locale: localStorage.getItem('locale') || 'zh-CN',
  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-CN')" :disabled="$i18n.locale == 'zh-CN'">中文</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-CN'){
        localStorage.setItem('locale', 'zh-CN')
        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'
      })
}

复制代码

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

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

在i18n入口文件编辑 src\renderer\modules\Lang\index.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-CN',
  messages 
})


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

export default i18n


复制代码

在项目渲染进程入口文件src\renderer\main.js

按照如上把国际化文件都整合到一起，避免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/>'
})

复制代码

效果如下：

!alt

参考

转载于:https://juejin.im/post/5d57bc23f265da03b8105cde

weixin_30335575

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
多语言设置

编写时间：2019-08-17更新时间：2019-08-17作者：鬼小妞备注：本文编写了与在electron-vue项目引用vue-i18n进行多语言设置，仅供参考，描述不当的地方，请评论指正状态：已完成、待补充2019-08-17[TOC]前提项目是使用以下命令一键式生成的electron-vue 的项目vue init simulatedgreg/electron-vu...
复制链接

扫一扫