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的值來實現(xiàn)語言切換
messages: {
'zh': zh,
'en': en
}
})
new Vue({
el: '#app',
i18n,
router,
store,
render: h => h(App)
})
其中的語言包文件格式有一些人設(shè)置的是json文件,這里引用的是js文件
- zh.js
module.exports = {
login: {
title: '登錄',
account: '賬號',
userName: '用戶名',
password: '密碼',
phone: '手機號',
email: '郵箱',
loginBtn: '登錄',
language: '語言'
},
content: {
main: '主要內(nèi)容'
}
}
- 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中實現(xiàn)
