electron-vue项目笔记3——vue-i18n多语言

4,032 阅读1分钟

官网vue-i18n

1. 安装vue-i18n多语言包

  1. npm install vue-i18n --save安装vue-i18n多语言包

2. 编写多语言模块脚本

  1. 创建文件夹【Lang】,在其下新建文件index.js,zh_CN.jsen_US.js,等其他语言包文件

index.js文件

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




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

Vue.use(VueI18n)

/*------------------------------------
*            导入语言包
------------------------------------*/
const DEFAULT_LANG = 'zh_CN' // 默认语言(当前使用的语言)


/*------------------------------------
       批量自动导入可选主题
------------------------------------*/
let langOptions = {};//可选主题
const files = require.context('.', false, /\.js$/);//第一个参数表示相对的文件目录,第二个参数表示是否包括子目录中的文件,第三个参数表示引入的文件匹配的正则表达式。
files.keys().forEach((key) => {
  if (key === './index.js') return
  let optionKey = key.substring(key.lastIndexOf('/')+1,key.lastIndexOf('.js'));//截取文件名称
  langOptions[`${optionKey}`]=key;
})

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

/*------------------------------------
*            设置语言配置
对外提供一个setup方法,用来修改我们的语言;
由于需要兼容多语言样式,所以这里在body上加入了相应的类名,方便我们做样式定制
------------------------------------*/
export const langSetup = langkey => {
    
    if(langkey){
        return
    }
    let  langName = langkey.replace(/\s+/g,"");//去除所有空格
    
    // 如果设置没有在可选语言里,则不可修改语言
    if(!langOptions[langName]){
        console.log("没有在可选语言里,不可修改语言")
        return 
    }
    
    // 如果以及添加过这个样式,就不再重复添加
    if(document.body.classList){
        if(Array.from(document.body.classList).includes('lang-' + langName)){
            console.log("你已使用该语言")
            return
        }
    }

    Object.keys(langOptions).forEach(langName => {
        document.body.classList.remove(`lang-${langName}`)
    })
    document.body.classList.add(`lang-${langName}`)
    document.body.setAttribute('lang', langName);//给body设置lang属性
    window.localStorage.setItem('LANG',langName);//缓存语言
    //把当前语言设置到vue的配置里面,方便在代码中读取
    Vue.config.lang = langName
    i18n.locale = langName
    console.log("修改语言成功")
}



/**
 * 语言初始化
 * @function initLang
 * 从本地存储取,设置语言
 */
export const initLang = function(){
    let localLang = window.localStorage.getItem('LANG')
    if(localLang){
        langSetup(localLang);//设置本地缓存语言
    }else{
        langSetup(DEFAULT_LANG);//设置默认语言
    }
}

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

zh_CN.js文件

/**
 * zh_CN.js 中文语言包
 * 由于部分语言带有单引号,所有多语言的翻译统一使用双引号
 */

export default {
    
    //页面字段
    view: {
        "name": "名字",
    },
}

en_US.js文件

/**
 * en_US.js 英文语言包
 * 由于部分语言带有单引号,所有多语言的翻译统一使用双引号
 */

export default {
    view: {
        "name": "Name",
    }
}

3. 主进程中引入多语言

  1. 主进程中引入多语言

/**------------------------------
                多语言
 --------------------------------*/
import { i18n, langSetup, initLang } from './modules/lang' //添加多语言i18n和根据多语言进行样式设置langSetup
Vue.langSetup = Vue.prototype.$langSetup = langSetup//绑定语言方便在vue组建中给body添加class和设置多语言
initLang();//直接初始化语言

4. vue组件html模板标签中使用多语言

  1. vue组件html模板标签中使用多语言{{ this.$t("语言设置名") }}

例如:中文语言包里

那么vue组件中就可以这样:

界面上显示出来就是这样子:

5. vue组件script标签中使用多语言

  1. vue组件script标签中使用多语言{{ this.$t("语言设置名") }}

6. 外部js使用多语言

  1. 外部js使用 ,先导入模块js, i18n.t('语言设置名')

例如:

i18n.t('view.name')

7. 根据多语言来实现界面css宽高的定制

  1. 设置多语言样式在body来定制

在组件里使用

this.$langSetup('zh_CN');//设置为中文

此时界面上全部显示中文,并且body样式与属性如下:

由于多语言后,设计稿的宽高并不一定能适用,所以需要对多语言进行样式定制

然后可以根据lang-zh_CN做一个中文的界面样式,lang-en_US做一个英文的样式

参考