uniapp 多语言

uni-app 多语言

在根目录创建对应的文件:(vue-i18n.min.js可自行搜索下载到本地)
api/locales/zh.js,
api/locales/en.js,
api/vue-i18n.min.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
// main.js

// 根Vue页
import App from './App'
import Vue from 'vue'
// i18n部分的配置
import Chinese from '@/api/locales/zh.js';
import English from '@/api/locales/en.js';

// VueI18n
import VueI18n from './api/vue-i18n.min.js';

Vue.use(VueI18n);

const i18n = new VueI18n({
   // 默认语言
   locale: 'zh',
   // 引入语言文件
   messages: {
      'zh': Chinese,
      'en': English,
   }
});

const app = new Vue({
   ...App,
   i18n,
})
app.$mount()

用法

1
2
3
4
5
6
// zh.js
export default {
    "error": {
        "title": "报错信息"
    }
}
1
2
 <view>{{ $t('error.title') }}</view>
<!-- <view>报错信息</view> -->