1. Download the il8n plug-in. The il8n version currently downloaded through npm install vue-il8n cannot support vue3.0, so you need to use npm install vue-i18n@next to get the latest version. The version I have here is ^9.0. 0-beta.17
npm install vue-i18n@next yarn add vue-i18n@next(个人推荐)2. Create a file name named language under src, and create four js files (Chinese, English, Japanese, Korean) under the file: zh-CN, en, ja, and ko.
3. Then write the corresponding methods in the four js files. The language we want to switch is stored here. The following is the Japanese language I wrote in the file named ja.js. The same method is used in the other three files. Write in sequence
4. Create an index.js file under the language file.
5. Create an il8n file under the language file.
6. Introduce in main.js
7. Use { {$t('message.storeBacode')}} in the component to display on the page
8. When used in js, in vue2.0 it is this. $t('message.storeBacode'), but in vue3.0 this has been canceled, so it is proxy. $t('message.storeBacode'),
1. Introduce getCurrentInstance into vue and mount getCurrentInstance
2. Using proxy.$t('message.unlimited') in reactive will report an error
Solution: Introduce useI18n(), and use the format t('message.canceled') for page rendering. The same can be used in js. No proxy is needed to operate, but when introduced, const {t} = useIl8n() should be written before reactive
No need to write proxy operation methods
Why use t instead of $t ( the following method does not conflict with $t, the reason why t is used is to solve the problem of error reporting in reactive )
$tIs a function of Vue18n instance. It has the following advantages and disadvantages: you can use mustache syntax flexibly in templates {}, and you can also use calculated props and methods in Vue component instances. However, the disadvantages are also obvious. It will be executed every time a re-rendering occurs, so there is indeed a translation cost. .
vt(t) has better performance than $tfunctions, and due to its early translation is possible which is provided by Vue's compiler module VUE, international extensibility allows for more performance optimizations. But the drawbacks are also obvious: for as $tflexible a use as it is, it's quite complex. The translated content v-twill be inserted textContentinto the element. Additionally, when you use server-side rendering, you need to set custom transform directiveTransformsoptions to compilethe function @vue/compiler-ssr.
9. Switch language within the component (key points)
1. Misunderstanding (in vue2.0, it is correct to use this.$il8n.locale = 'cn' to achieve language switching, but in vue3.0, although proxy is equivalent to this in vue2.0, this It is an error to switch the language, and the background will prompt undefined . Although il8n is indeed mounted at this time , and the locale will also report an error , I don’t know what the problem is and how to solve it.)
2. Solution (although I don’t know what the situation was, the problem was solved in the end, let’s look at the solution)
1. Print proxy, then find the availableLocales array in il8n, see the several languages we want to set earlier, and then we take it out
2. Take out the availableLocales in il8n and render it into select. Of course, you need to do some calculations before doing this. Otherwise, what will be printed out will be cn, en, ja, ka. As developers, we can understand this ourselves, but For users, it is incomprehensible
1. Calculate and convert (if you wrote the method, remember to return it, otherwise you will get an error if you can’t find the method)
2. Render to the page
<el-select v-model="$i18n.locale" placeholder="请选择" @change="languageBtn($event)">
<el-option
v-for="locale in $i18n.availableLocales" :key="`locale-${locale}`" :value="locale" :label='LanguageComputing(locale)'>
</el-option>
</el-select>
3. Print the results
1. Before switching (default is English, local is also en)
2. After switching the language (displaying Japanese, local also becomes ja)
Note: I have not yet used { {$t('message.storeBacode')}} to render on the page , so you can see that my text has not changed, but in fact it has switched languages. have to
Have you learned it? If you like it, remember to like, follow and collect it.