官网vue-i18n
1. 安装vue-i18n多语言包
npm install vue-i18n --save
安装vue-i18n多语言包
2. 编写多语言模块脚本
- 创建文件夹【Lang】,在其下新建文件
index.js
,zh_CN.js
,en_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. 主进程中引入多语言
- 主进程中引入多语言
/**------------------------------
多语言
--------------------------------*/
import { i18n, langSetup, initLang } from './modules/lang' //添加多语言i18n和根据多语言进行样式设置langSetup
Vue.langSetup = Vue.prototype.$langSetup = langSetup//绑定语言方便在vue组建中给body添加class和设置多语言
initLang();//直接初始化语言
4. vue组件html模板标签中使用多语言
- vue组件html模板标签中使用多语言
{{ this.$t("语言设置名") }}
例如:中文语言包里
那么vue组件中就可以这样:
界面上显示出来就是这样子:
5. vue组件script标签中使用多语言
- vue组件script标签中使用多语言
{{ this.$t("语言设置名") }}
6. 外部js使用多语言
- 外部js使用 ,先导入模块js,
i18n.t('语言设置名')
例如:
i18n.t('view.name')
7. 根据多语言来实现界面css宽高的定制
- 设置多语言样式在body来定制
在组件里使用
this.$langSetup('zh_CN');//设置为中文
此时界面上全部显示中文,并且body样式与属性如下:
由于多语言后,设计稿的宽高并不一定能适用,所以需要对多语言进行样式定制
然后可以根据lang-zh_CN
做一个中文的界面样式,lang-en_US
做一个英文的样式