uniapp之国际化VueI18n

最新推荐文章于 2025-04-08 19:20:01 发布

原创最新推荐文章于 2025-04-08 19:20:01 发布 · 405 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app

该博客基于Vue3.0介绍uni-app国际化配置。提供了参考网站，详细说明了配置步骤，包括装包、在根目录创建目录并设置zh.json、en.json、index.js内容，还需在main.js引入，最后引入使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前提：vue3.0

参考网站与文章：

https://uniapp.dcloud.net.cn/tutorial/i18n.html

http://t.csdnimg.cn/dRC5B

1.装包

npm  vue-i18n

其中zh.json内部为

{
	"index.home":"首页",
	"schedule.index":"日程",
	"code.index":"二维码",
	"message.index":"消息",
	"my.index":"我的"
}

其中en.json内部为

{
	"index.home":"Home",
	"schedule.index":"Schedule",
	"code.index":"Code",
	"message.index":"Message",
	"my.index":"My"
}

其中index.js内部为

import zhHans from './zh-Hans.json'
import en from './en.json'
 
 
export default {
	'zh-Hans': zhHans,
	en,
}

3.main.js引入

import App from './App'
// 国际化 json 文件，文件内容详见下面的示例
import messages  from './locale/index.js'


let i18nConfig = {
  locale: uni.getLocale()|| "zh-Hans",// 获取已设置的语言
  messages
}

// VUE2
// #ifndef VUE3
import Vue from 'vue'
import VueI18n from 'vue-i18n'// v8.x
Vue.use(VueI18n)
const i18n = new VueI18n(i18nConfig)
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
  i18n,
  ...App
})
app.$mount()
// #endif

// VUE3
// #ifdef VUE3
import { createSSRApp } from 'vue'
import { createI18n } from 'vue-i18n'// v9.x
const i18n = createI18n(i18nConfig)
export function createApp() {
  const app = createSSRApp(App)
  app.use(i18n)
  return {
    app
  }
}
// #endif

4.引入使用

<button form-type="submit">{{$t('login.loginbtn')}}</button>