uniappX 使用 lime-i18n 插件适合新手小白
1、按照官方文档步骤导入到项目
2、main.uts代码如下
import App from './App.uvue'
import { createSSRApp } from 'vue'
// main.uts
import { createI18n } from '@/uni_modules/lime-i18n'
//目录自己决定
import zhCN from './locales/zh_CN'
import enUS from './locales/en_US'
console.info(zhCN)
const i18n = createI18n({
// 使用uni.getStorageSync('uVueI18nLocale') 能获取上次退出应用后保存的语言
locale: 'zh_CN', // 默认显示语言
fallbackLocale: 'en_US',
messages: {
'zh_CN': zhCN,
'en_US': enUS
}
})
export function createApp() {
const app = createSSRApp(App)
app.use(i18n)
return {
app
}
}
注意语言的下划线和减号,一定要对应
3、语言包文件命名和位置
4、zh_CN.uts内容
const messages = {
"你好": {
"世界!": "你好世界!"
}
}
export default messages
5、en_US.uts内容
const messages = {
"你好": {
"世界!": "hello world!"
}
}
export default messages
6、index.uvue内容
<template>
<view>
<image class="logo" src="/static/logo.png"></image>
<view class="text-area">
<text>测试:{{ $t('你好.世界!') }}</text>
<button @click="$locale.value = $locale.value != 'zh_CN' ? 'zh_CN' : 'en_US'">切换{{$locale}}</button>
</view>
</view>
</template>
<script>
export default {
data() {
return {
title: 'Hello'
}
},
onLoad() {
console.info(this.$locale.value)
},
methods: {
}
}
</script>
<style>
.logo {
height: 100px;
width: 100px;
margin: 100px auto 25px auto;
}
.title {
font-size: 18px;
color: #8f8f94;
text-align: center;
}
</style>
好了,结束了!适合新手