vue3前端国际化

定义

i18n（其来源是英文单词 internationalization的首末字符i和n，18为中间的字符数）是“国际化”的简称。

用法

1.安装插件

安装时需要指定版本号

npm i vue-i18n@8.22.2

2.全局挂载i18n

// main.ts
import i18n from '../components/lang';

app.use(i18n);

3.在组件的.vue文件中导入i18n

// ./common/src/index.vue
import { useI18n } from 'vue-i18n'

const { t } = useI18n();

4.修改项目结构

cn里面存储中文对应的.ts文件，en里面存储英文对应的.ts文件

例如：

./lang/cn/common.ts

/lang/en/common.ts

修改en-US.ts

import common from './en/common';
export default {
    ...common,
};

修改zh-US.ts 

import common from './en/common';
export default {
    ...common,
};

修改./lang/index.ts 

import { createI18n } from 'vue-i18n'
import cn from './zh-CN'
import en from './en-US'
const message = { 'zh-cn':cn, 'en':en }

/**
 *获取当前系统使用语言字符串
 *@returns zh-cnen ..
 */
export const getLanguage =()=>
// 本地缓存获取
  let language = localstorage.getItem('language');
  console.log(language+"language")
  if(language){
    return language,
  }
  // 浏览器使用语言
  language = navigator.language.toLowerCase()
  const locales =0bject.keys(messages);
  console.log(locales+"locales"
  console.log(locales+"messages")
  for(const locale of locales){
    if(language.indexof(locale)>-1){
      return locale;
    }
  }
  return 'zh-cn';
};
const 118n = createI18n({
  locale:getLanguage(),
  messages: messages
});

export default i18n;

5.在vue文件中使用

<div class="test">{{ t('common.ok') }}</div>

错误：

在props中使用前端国际化报错

解决办法：在src的同级目录下创建一个props.ts文件，将vue文件中定义的props写入props.ts文件，将新建的props.ts文件导入到vue文件中

// props.ts

// 注意这里引入i18n的方式
import i18n from'../../lang/index';
const { t } = i18n.global as any;
export const basicProps = {

}；

// index.vue
import { basicProps } from './props'

const props = defineProps(basicProps)