近期完成了一个移动端的项目，实现了三种语言。利用的是i18n插件，有一个问题就是：当语言包过大的时候，项目运行起来比较慢。此时我们处理方法是，将一些动态的文字由后台传给前端，语言包只存储不变的一些文字。
1、安装
npm install vue-i18n --save
2、如下图建立对应的项目文件结构
3、在assets文件夹下i18n文件夹里面的en.js和ft.js如下：
- en.js文件内容
/*英文包 en*/
export default {
login:{
'title' : 'Software system',
'username' : 'Please enter the user name',
'password' : 'Please enter your password',
'login' : 'Login',
'language' : 'Please select language'
}
}
- ft.js文件内容
/*中文繁体语言 zh-CHT */
export default {
login:{
'title' : '軟件系統',
'username' : '請輸入用戶名',
'password' : '請輸入密碼',
'login' : '登錄',
'language' : '請選擇語言'
}
}
4、在tools文件夹中新建i18n.js文件,文件内容
import Vue from 'vue'
import VueI18n from 'vue-i18n'
import en from '../assets/i18n/en'
import ft from '../assets/i18n/ft'
Vue.use(VueI18n)
// 以下为语言包单独设置的场景，单独设置时语言包需单独引入
const messages = {
'zh-CHT':ft, //中文繁体语言包
'en': en // 英文语言包
}
export default new VueI18n({
locale : "en", // set locale 默认显示英文
messages : messages // set locale messages
})
5、最后在main.js里面全局引入并挂载
//...其他代码
//引入多语言支持
import i18n from './tools/i18n'
//...其他代码
new Vue({
el: '#app',
i18n, //挂载i18n
router,
store,
components: { App },
template: '<App/>'
})
6、使用示例 比如在login.vue组件中
//template
<h3>{{$t("login.title")}}</h3>
<button @click='langToggle'>en/中</button>
//js 在js使用时则为 this.$t("login.title")
methods:{
langToggle(){ //切换语言
if(this.$i18n.locale = 'zh-CHT'){
this.$i18n.locale = 'en';
}else{
this.$i18n.locale = 'zh-CHT';
}
}
}
