Shulou(Shulou.com)06/02 Report--

This article introduces how to support multiple languages in the vue project, the content is very detailed, interested friends can refer to, I hope it can be helpful to you.

First of all, we might as well extract the common part of the web page that needs to transform the language and put it into an object with the following code:

Const messages = {

En: {

Message: {

Hello: 'world hello'

}

}

Zh: {

Message: {

Hello: the World

}

}

}

As can be seen from the above code, hello is a public variable, displayed as "world" in Chinese websites and "world hello" in English websites. Then distinguish between Chinese and English by the properties of the object, and then load the object into the global. How to load into the global, in the Vue project, you need to use the Vue-i18n module. The code is as follows:

Main.js

Import Vue from 'vue'

Import App from'. / App'

Import VueI18n from 'vue-i18n'

Const messages = {

En: {

Message: {

Hello: 'world hello'

}

}

Zh: {

Message: {

Hello: the World

}

}

}

Vue.use (VueI18n)

Const i18n = new VueI18n ({

Locale: 'zh'

Messages

})

New Vue ({

I18n

Template:''

Components: {App}

}). $mount ('# app')

App.vue source code:

{{$t ("message.hello")}}

Export default {

Created () {

Console.log (this.$t ("message.hello"))

}

}

The print result is world, because we passed in two parameters, local and messages, in the process of creating the vue-i18n instance. Local identifies which language to use, and local passes in a zh,messages that contains a custom language module. If en is passed in from local, the printed result will become world hello.

Then pass in i18n during the instantiation of the component so that the $t function can be accessed in the component, through which we can take out the property values in the messages and render them to the page.

The core is to realize the language switch through the parameter local in the process of instantiation, and to load the language pack by message. Developers only need to extract the common parts that need to be translated and put them into message.

On how to support multiple languages in the vue project to share here, I hope the above content can be of some help to you, can learn more knowledge. If you think the article is good, you can share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.