Vue国际化实现

安装npm install vue-i18n

• 创建语言包
  一般在src目录下创建common/lang
  英文：en.js

export const m = { 
    lang: 'CN',
    music: 'Music',//网易云音乐
    findMusic: 'FIND MUSIC',//发现音乐
    myMusic: 'MY MUSIC',//我的音乐
    friend: 'FRIEND',//朋友
    musician: 'MUSICIAN',//音乐人
    download: 'DOWNLOAD',//下载客户端
    setting: 'SETTING',
}

中文：zn.js

export const m = {
    lang: '英文',
    music: '网易云音乐',
    findMusic: '发现音乐',
    myMusic: '我的音乐',
    friend: '朋友',
    musician: '音乐人',
    download: '下载客户端',
    setting: '设置',
}

原理都是导出一个变量m

• 创建js文件i18n.js

import Vue from 'vue'
import VueI18n from 'vue-i18n'
Vue.use(VueI18n) // 通过插件的形式挂载
const i18n = new VueI18n({
  locale: 'zh-CN',    // 默认语言简体中文
  //this.$i18n.locale // 通过切换locale的值来实现语言切换
  messages: {
    'zh-CN': require('../common/lang/zh'),   // 中文语言包路径引入
    'en-US': require('../common/lang/en')    // 英文语言包路径引入
  }
});

export default i18n

• 在main.js引入

//vuex引入
import store from './mainJS/store'

使用

• 在函数中使用：this.$t('m.music')

• 在属性中使用：<span v-text="$t('m.music')"></span>

• 在标签中使用：<span>{{$t('m.music')}}</span>