vue3+TS实现项目国际化

目录

1、安装i18n

2、文件的配置

3、使用方法

1、安装i18n

使用ts记得加上 @next获取最新版本

npm install vue-i18n@next  
或
yarn add vue-i18n@next

2、文件配置

1. 在src下面创建一个名为language的文件名，新建一个ch.ts 文件和en.ts （分别对应中文和英文，有需要可自行添加）

ch.ts

export default {
  message: {
    Home: '首页',
    About: '关于我们',
    productService: '产品服务',
    cases: '行业解决方案',
    news: '新闻动态',
    contactUs: '联系我们',
  },
}

en.ts

export default {
  message: {
    Home: 'index',
    About: 'about',
    productService: 'service',
    cases: 'cases',
    news: 'news',
    contactUs: 'contactUs',
  },
}

2.新建index.ts文件

import en from './en'
import ch from './zh'

export default {
  en,
  ch,
}

3.创建i18n.ts文件

import { createI18n } from 'vue-i18n' //引入vue-i18n组件
import messages from './index'  
const language = (
   navigator.language  || 'zh'
).toLowerCase();

let lang = localStorage.getItem('language') || 'en'

const i18n = createI18n({
  silentTranslationWarn: true,  //

关闭警告信息
  globalInjection: true,        //是否开启全局
  legacy: false, // you must specify 'legacy: false' option
  locale: lang,        //当前的语言
  messages,      //语言文件
});

export default i18n

4.在main.ts中引用

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import i18n from './language/i18n'
createApp(App)
  .use(router)
  .use(i18n)
  .mount('#app')

3、使用

<template>
<div> {{ i18n.t('message.Home') }} </div>   //输出index
</template>

// 国际化
import { useI18n } from 'vue-i18n'; //要在js中使用国际化
let i18n = useI18n();

注意：如果需要保存的话，需要使用computed来保存数据，不然即使切换后，数据也不会变化

<template>
<div> {{ List[0]) }} </div>   //输出index
<div> {{ List[1] }} </div>   //输出about
</template>

let List: any = computed(() => {
  return [
  i18n.t('header.Home') ,  i18n.t('header.About')  ]; 
});

语言切换

<template>
<button @click='changeLanguage('ch')'> 切换为中文 </button>
<button @click='changeLanguage('en')'> 切换为英文 </button>
</template>

const changeLanguage = (lang:string) =>{
i18n.locale.value = lang;
localStorage.setItem('language', lang);
}

个人博客:Hyyyh的博客