vue3中使用i18n国际化插件

vue3中使用i18n国际化插件

1,下载i18n到项目中

npm install --save vue-i18n

2,在src目录下新建i18n文件夹

3,然后新建 en.ts index.ts zh.ts

4,在index.ts中引入i18n插件

// index.ts 文件内容

import { createI18n } from 'vue-i18n';

import ZH from './zh';
import EN from './en';

const message = {
  zh: {
    ...ZH,
  },
  en: {
    ...EN,
  },
};

//当前语言状态
const getCurrentLanguage = () => {
  const UAlang = navigator.language; // zh-CN
  const langCode = UAlang.indexOf('zh') !== -1 ? 'zh' : 'en';
  localStorage.setItem('lang', langCode);
  return langCode;
};

const i18n = createI18n({
  legacy: false,
  globalInjection: true,
  locale: getCurrentLanguage() || 'zh',
  messages: message,
});

export default i18n;

5,en.ts 和 zh.ts 写入需要转化的文字和内容

en.ts

// en.ts 文件内容

export default {
  login: {
    title: 'Sign in',
    ipt_name: 'Username',
    ipt_psd: 'PassWord',
    btn_login: 'Sign in',
    tips_btn: 'Remember me',
    forget_psd: 'Forget Password?',
    btn_bottom: 'Mobile sign in',
    btn_bottom1: 'Qr code sign in',
    btn_bottom2: 'Sign up',
  },
  menuRouter: {
    index: 'index',
    iconsComponents: 'icons/components',
    list: 'list',
    complexList: 'complexList',
    packageList: 'packageList',
    signList: 'signList',
    simpleList: 'simpleList',
    errorPage: 'errorPage',
    fourHundredAndOne: 'fourHundredAndOne',
    fourHundredAndFour: 'fourHundredAndFour',
    dataVisualization: 'dataVisualization',
    trendCharts: 'trendCharts',
  },
  home: {
    card: 'New Visits',
    card1: 'New Messages',
    card2: 'New Purchases',
    card3: 'New Shoppings',
  },
  navBar: {
    index: 'index',
    list: 'list',
    complexList: 'complexList',
    packageList: 'packageList',
    signList: 'signList',
    data: 'data',
    fourHundredAndOne: '401',
    fourHundredAndFour: '404',
  },
};

zh.ts

// zh.ts 文件内容

export default {
  login: {
    title: '登录',
    ipt_name: '账号',
    ipt_psd: '密码',
    btn_login: '登录',
    tips_btn: '记住我',
    forget_psd: '忘记密码?',
    btn_bottom: '手机登录',
    btn_bottom1: '二维码登录',
    btn_bottom2: '注册',
  },
  menuRouter: {
    index: '系统首页',
    iconsComponents: '图标/组件',
    list: '列表',
    complexList: '复杂列表',
    packageList: '封装列表',
    signList: '掘金签到列表',
    simpleList: '简易列表',
    errorPage: '错误页面',
    fourHundredAndOne: '401',
    fourHundredAndFour: '404',
    dataVisualization: '数据可视化',
    trendCharts: '流程图',
  },
  home: {
    card: '最新访问',
    card1: '最新消息',
    card2: '最新购买',
    card3: '最新购物',
  },
  navBar: {
    index: '首页',
    list: '列表',
    complexList: '复杂列表',
    packageList: '封装列表',
    signList: '掘金签到列表',
    data: '流程图',
    fourHundredAndOne: '401',
    fourHundredAndFour: '404',
  },
};

6,然后在main.ts中引入

import i18n from '@/i18n/index';
...
app.use(i18n);

7,使用

在template中直接使用

8,切换语言

import { useI18n } from 'vue-i18n';
const langT = ref(false);
const { locale } = useI18n();

changeLang() //先进行一次调用
//语言切换函数
function changeLang() {
  let lang = langNum.value ? 'en' : 'zh';
  locale.value = lang;
  localStorage.setItem('lang', lang);
}