vue国际化教程

main.js

import vue from 'vue'

import app from './app'

import router from './router'

import vuei18n from 'vue-i18n'

import elementui from 'element-ui';

vue.use(elementui);

vue.use(vuei18n)

const i18n = new vuei18n({

locale: 'zh-cn', // 语言标识

//this.$i18n.locale // 通过切换locale的值来实现语言切换

messages: {

'en-us': require('./assets/languages/en'), // 英文语言包

'zh-cn': require('./assets/languages/zh-cn'), // 中文语言包

}

})

console.log(i18n.locale)

/* eslint-disable no-new */

new vue({

el: '#app',

router,

i18n,

components: { app },

template: ''

})

app.vue文件

<script>

import appfooter from "@/components/app-footer"

export default {

name: 'app',

data() {

return {

}

},

components: {

appfooter

},

methods: {

},

mounted() {

}

}

</script>

文件

{{$t('m.music')}}

<script>

export default {

name: "app",

data() {

return {

lang: "zh-cn"

}

},

methods: {

/**

* 切换语言

*/

changelangevent() {

this.$confirm('确定切换语言吗', '提示', {

confirmbuttontext: '确定',

cancelbuttontext: '取消',

type: 'warning'

}).then(() => {

console.log(this.lang)

if (this.lang === 'zh-cn') {

this.lang = 'en-us';

this.$i18n.locale = this.lang;//关键语句

} else {

this.lang = 'zh-cn';

this.$i18n.locale = this.lang;//关键语句

}

}).catch(() => {

this.$message({

type: 'info',

});

});

}

}

}

</script>

语言包

export const m = {

music: '网易云音乐',

findmusic: '发现音乐',

mymusic: '我的音乐',

friend: '朋友',

musician: '音乐人',

download: '下载客户端'

}

export const m = {

music: 'music',//网易云音乐

findmusic: 'find music',//发现音乐

mymusic: 'my music',//我的音乐

friend: 'friend',//朋友

musician: 'musician',//音乐人

download: 'download'//下载客户端

}