导读：今天分享一下uniapp与vue-i18n实现国际化多语言教程，希望对大家有所帮助。
今天分享一下uniapp与vue-i18n实现国际化多语言教程，希望对大家有所帮助。
main.js
- import Vue from 'vue'
- import App from './App'
- import VueI18n from 'vue-i18n'
-
- Vue.use(VueI18n)
- Vue.config.productuinTip = false
-
- const i18n = new VueI18n({
- locale: 'en-US',
- messages: {
- 'en-US': {
- index: {
- invite: 'Invite',
- game: 'Game'
- }
- },
- 'zh-CN': {
- index: {
- invite: '邀请',
- game: '游戏'
- }
- }
- }
- })
-
- Vue.prototype._i18n = i18n
- App.mpType = 'app'
-
- const app = new Vue({
- i18n,
- ...App
- })
- app.$mount()
uniapp 不支持在取值表达式中直接调方法，因此，$t方法不可用，所以通过计算属性的方式：
index.vue
- <template>
- <view class="uni-content">
- <text>{{ i18n.invite }}</text>
- <text>{{ i18n.game }}</text>
- </view>
- </template>
-
- <script>
- export default {
- computed: {
- i18n () {
- return this.$t('index')
- }
- }
- }
- </script>
-
- <style>
- </style>
更多国际化参考https://ask.dcloud.net.cn/article/35872
