vue3使用vue-i18n实验多语言设置

1. 安装依赖

npm install vue-i18n@next -S

2. 新建语言配置文件

a. 新建lang文件夹（也可以叫其它名字）用于存放所用到的语言包
b. 在lang文件夹下新建index.js用于根据不同的语言参数引用不同的语言包
c. 新建对应的要用到的语言文件例如zh.js, en.js

image.png

lang文件夹下面的index.js代码示例如下（这里只示范中英两种语言也可根据自身需要自行添加）

import { createI18n } from "vue-i18n";
import zh from "./zh";
import en from "./en";

const i18n = createI18n({
  locale: "zh", // 定义默认语言为中文
  legacy: false,
  globalInjection: true,
  locale: uni.getStorageSync("lang") ,
  messages: {
    zh,
    en,
  },
});

export default i18n;

en.js和zh.js文件的格式一致

export default {
  "welcomeToUse.i18n": "欢迎使用i18n",
};

3. 开始使用

在main.js中

import i18n from "./lang/index";

app.use(i18n);

在标签中使用

<p class="title">{{ $t('new.activityName') }}</p>

在js中使用

import i18n from '@/lang/index'
i18n.global.t('welcomeToUse.i18n')

生活就是不断的积累 奥力给