1.安装依赖vue-i8n
注:版本安装8.27.0 超过9会报错
npm i vue-i18n@8.27.0 --save
2.创建语言包文件
在src目录下创建一个lang文件夹,在lang文件下创建zh.js(中文),en.js(英文)语言包js文件,并创建一个index.js文件,用来整合语言包
zh.js
export default {
// 登录页面文字
loginPage: {
login: '登录',
userLogin:'用户登录',
remeber:'记住用户名和密码'
},
}
en.js
export default {
// 登录页面文字
loginPage: {
login: 'Login',
userLogin: 'User Login',
remeber: 'Remember user name and password'
},
}
index.js
import Vue from 'vue'
import VueI18n from 'vue-i18n'
// 从语言包文件中导入语言包对象
import zh from './zh.js'
import en from './en.js'
//使用vuex
import store from '../store'
// element-ui 组件国际化
import ElementLocale from 'element-ui/lib/locale'
import enLocale from 'element-ui/lib/locale/lang/en'
import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
ElementLocale.i18n((key, value) => i18n.t(key, value))
Vue.use(VueI18n)
const messages = {
zh: {
...zh,
...zhLocale
},
en: {
...en,
...enLocale
},
}
console.log(store.state.langs)
const i18n = new VueI18n({
messages,
locale: store.state.langs, //初始默认中文
fallbackLocale: 'zh', // 若某个语言环境变量,则使用fallbackLocale环境下对应的变量
silentFallbackWarn: true, // 抑制警告
globalInjection: true, // 全局注入
silentTranslationWarn: true
})
export default i18n
vuex文件
在src目录下创建store文件夹,在store文件下创建index.js
index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
//定义数据,相当于data
state: {
langs: localStorage.getItem('lang') ? localStorage.getItem('lang') : 'zh'
},
//相当于vuex的计算属性
getters: {
},
//里面定义方法,操作state方发(同步)
mutations: {
setLangInfo(state, val) {
state.langs = val
},
},
// 操作异步操作mutation(异步)
actions: {
},
//模块化
modules: {
},
})
3.main.js
//引入语言包
import i18n from './lang/index'
//引入Vuex
import store from './store'
//挂载到vue实例上
new Vue({
router,
i18n,
store,
render: h => h(App)
}).$mount('#app')
4.创建中英文切换组件
<template>
<div class="langes">
<el-radio-group v-model="radio" @change="changeLangs">
<el-radio label="zh">中文</el-radio>
<el-radio label="en">英文</el-radio>
</el-radio-group>
</div>
</template>
<script>
export default {
name: 'langePage',
data() {
return {
radio: this.$store.state.langs,
}
},
methods: {
changeLangs(val) {
this.$nextTick(() => {
this.$store.commit('setLangInfo', val)
localStorage.setItem('lang', val) // 存储到本地存储,防止页面刷新返回初始状态
this.$i18n.locale = val
})
},
},
}
</script>
<style scoped>
.langes {
position: fixed;
top: 20px;
right: 60px;
z-index: 10000;
}
</style>
5.在页面模板使用
<div class="formBox">
<div class="userLogin">{{ $t('loginPage.userLogin') }}</div>
<el-input
prefix-icon="el-icon-user"
v-model="loginInfo.userName"
>
</el-input>
<el-input
style="margin-top: 20px"
type="password"
prefix-icon="el-icon-lock"
v-model="loginInfo.password"
>
</el-input>
<div class="remember">
<el-checkbox v-model="remember">{{
$t('loginPage.remeber')
}}</el-checkbox>
</div>
<div class="submit" @click="submit">{{ $t('loginPage.login') }}</div>
</div>