今天项目提出一个多语言的需求,了解了一下vue可以使用i18n插件来实现该效果,记一下笔记,说明自己参考网上的资料的实现过程
- i18n在vue项目里的使用
- 引入
npm i vue-i18n -S
-
文件结构如下
- 为了使项目结构更清晰,我们单独在tools文件夹中新建i18n.js文件,文件内容
import Vue from 'vue'
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
// 以下为语言包单独设置的场景，单独设置时语言包需单独引入
const messages = {
'zh_CN': require('../assets/i18n/zh'), // 中文语言包
'en_US': require('../assets/i18n/en') // 英文语言包
}
// 最后 export default，这一步肯定要写的。
export default new VueI18n({
locale : 'en', // set locale 默认显示英文
messages : messages // set locale messages
})
- 然后在main.js里面全局引入并挂载
//...其他代码
//引入多语言支持
import i18n from './tools/i18n'
//...其他代码
new Vue({
el: '#app',
i18n, //挂载i18n
router,
store,
components: { App },
template: '<App/>'
})
- 在assets/i18n里面的zh.js和cn.js如下
- zh.js
/* 国际化zh_cn */
module.exports = {
login:{
'title' : '软件系统',
'username' : '请输入用户名',
'password' : '请输入密码',
'login' : '登录',
'language' : '请选择语言'
},
}
- en.js
module.exports = {
login:{
'title' : 'Software system',
'username' : 'Please enter the user name',
'password' : 'Please enter your password',
'login' : 'Login',
'language' : 'Please select language'
},
}
- 这样我再组件login.vue里面就可以使用了
//template
<h3>{{$t("login.title")}}</h3>
<button @click='langToggle'>en/中</button>
//js
methods:{
langToggle(){
if(this.$i18n.locale = 'zh_CN'){
this.$i18n.locale = 'en_US';
}else{
this.$i18n.locale = 'zh_CN';
}
}
}
