uniapp使用国际化

uniapp＋vue3

1、安装依赖

npm install vue-i18n@next -S

2、设置语言包

在src下创建lang文件夹，并分别创建 zn.js 和en.js 语言包（语言包命名随便）。

// zn.js  中文展示
export default {
  index:{
    title:"标题",
  }
};

// en.js  英文展示
export default {
  index:{
    title:"title",
  }
}

3、使用语言包

在lang文件夹下创建index.js文件，引入zn.js 和en.js 语言文件。

import { createI18n } from 'vue-i18n';  
import zn from './zn';
import en from './en';
 
const i18n = createI18n({
  locale: 'zn',
  messages: {
    'zn': zn,
    'en': en
  }
});
 
export default i18n;

4、在main.js中挂载

// main.js 引入国际化
import i18n from './lang';

export function createApp() {
  const app = createSSRApp(App);
  app.use(i18n);
	
  return {
    app,
		i18n
  };
}

5、在页面中使用使用

使用$t{}

<view class="">
	{{$t('index.title')}}
</view>

6、语言切换

在页面中定义事件，改变 locale 的值，实现语言切换

// 引入国际化
import { useI18n } from 'vue-i18n';
// 语言切换
const { locale } = useI18n();
 function changeLang(n){
	locale.value=n
}