Vue implements internationalization of web page language switching

1. Basic steps

1: Install yarn add vue-i18n

Create a new .js file in this path: src/lang/index.js :

2: Import

import VueI18n from 'vue-i18n'

3: Register

import Vue from 'vue'

Vue.use(VueI18n)

4: Instantiation

const i18n = new VueI18n({
	locale:'The current language identifier', // en: English zh: Chinese messages:{
		// Language pack en:{
		home:'home'
		},
		zh:{
		home:'Home'
		}
	}
})

5: Exposed

export default i18n

6: Mount to main.js

import i18n from '@/lang'
new Vue({
i18n
})

Use: <div>{ {$t('home')}}</home>

2. Import element-ui international language configuration in main.js

import i18n from './lang/index'
import ElementUI from 'element-ui'
Vue.use(ElementUI, {
  i18n: (key, value) => i18n.t(key, value)
})

3. Create a new .vue file to switch languages ​​through buttons

Notice:

this.$i18n.locale can get and set the current language and use internationalization in js files

4. To achieve the internationalization of the website menu, you need to introduce it in the routing

After import i18n from '@/lang' i18n.t===this.$t

This concludes this article about Vue's implementation of internationalization of web page languages. I hope it will be helpful for everyone’s study, and I also hope that everyone will support 123WORDPRESS.COM.