Vue国际化 vue-i18n 的初步使用

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>

2. 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文件

1. zh.js

module.exports = {
  login: {
    title: '登录',
    account: '账号',
    userName: '用户名',
    password: '密码',
    phone: '手机号',
    email: '邮箱',
    loginBtn: '登录',
    language: '语言'
  },
  content: {
    main: '主要内容'
  }
}

2. 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") 语法

1. 标签中使用

<h3 class="title">{{ $t("login.title") }}</h3>

2. 在message中使用

 this.$message.success(this.$t('login.loginBtn'))

其他参考文章
vue 国际化 vue-i18n 双语言 语言包
深入vue-element-admin（一）--国际化(router中实现