前言：
一个月前项目应客户需求需要英文版，就此提出了国际化的需求。在以搭建的项目上开始国际化的处理。
准备：
1.安装与引用
npm install vue-i18n
在main.js中引入
import i18n from './i18n/i18n';
Vue.use(i18n);
window.app = new Vue({
el: '#app',
router,
store,
i18n,
template: '<App/>',
components: {
App
}
})
2.目录结构
图片1 -- 目录结构图
3.主要文件：
i18n.js:获取本地localStorage中存储的语言，用此存储主要是为了能记住用户选择的语言状态。
import Vue from 'vue';
import locale from 'element-ui/lib/locale'; //elementUI的国际化
import VueI18n from 'vue-i18n';
import languagePack from './langs';
import {
getLocalStore
} from "@/utils/webstore-utils.js";
import {
LAGU
} from "../config/webstore";
Vue.use(VueI18n)
const i18n = new VueI18n({ //从localStorage中取，没有就默认的中文
locale: getLocalStore(LAGU) || 'zh',
languagePack,
})
locale.i18n((key, value) => i18n.t(key, value)) //elementui多语言切换
export default i18n
index.js
import en from './en';
import zh from './zh';
export default {
en: en,
zh: zh
}
en.js 和 zh.js 即自定义的语言包,一下为部分示例。中英对照
import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
const zh = {
login: {
'username': '用户名',
'password': '密码',
'signin': '登录',
},
...zhLocale
}
export default zh;
import enLocale from 'element-ui/lib/locale/lang/en'
const en = {
login: {
'username': 'username',
'password': 'password',
'signin': 'signin',
},
...enLocale
}
export default en;
4.原项目中语言进行替换，并进行监听用户选择的语言
重点：$t(' ')
<el-input :placeholder="$t('login.username')" ></el-input>
<el-checkbox v-model="language">{{$t('login.selectLanguage')}}</el-checkbox>
//js中 要加上this
export default {
...
message: this.$t("a.b"),
...
}
watch: {
language: function() { //此处language对应上方的checkbox进行绑定的数据
this.$i18n.locale === "zh"
? (this.$i18n.locale = "en")
: (this.$i18n.locale = "zh");
getLocalStore(LAGU) === "zh" //本地存储的进行变化
? setLocalStore(LAGU, "en")
: setLocalStore(LAGU, "zh");
}
}
5.遇到切换后data数据没变化
解决：放到computed中
