1. 引入vue-i18n
1.script 方式
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-i18n/dist/vue-i18n.js"></script>
- npm 方式
>npm install vue-i18n
>npm install vue-i18n --save-dev
2. vue中引入使用
在项目的 main.js中引入vue-i18n
import App from './App'
import store from './store'
import router from './router'
import VueI18n from 'vue-i18n' // 语言包
import zh from './assets/lang/zh' // 中文
import en from './assets/lang/en' // 英文
Vue.use(VueI18n) // 通过插件的形式挂载，通过全局方法 Vue.use() 使用插件
const i18n = new VueI18n({
locale: 'zh', // 语言标识 //this.$i18n.locale // 通过切换locale的值来实现语言切换
messages: {
'zh': zh,
'en': en
}
})
new Vue({
el: '#app',
i18n,
router,
store,
render: h => h(App)
})
其中的语言包文件格式有一些人设置的是json文件,这里引用的是js文件
- zh.js
module.exports = {
login: {
title: '登录',
account: '账号',
userName: '用户名',
password: '密码',
phone: '手机号',
email: '邮箱',
loginBtn: '登录',
language: '语言'
},
content: {
main: '主要内容'
}
}
- en.js
module.exports = {
login: {
title: 'login',
userName: 'userName',
password: 'password',
phone: 'phone',
email: 'email',
loginBtn: 'login',
language: 'language'
},
content: {
main: 'content'
}
3. 在template 中使用 $t("xxxx") 语法
- 标签中使用
<h3 class="title">{{ $t("login.title") }}</h3>
- 在message中使用
this.$message.success(this.$t('login.loginBtn'))
其他参考文章
vue 国际化 vue-i18n 双语言 语言包
深入vue-element-admin（一）--国际化(router中实现
