国际化i18n

国际化i18n

1. 下载

   npm install vue-i18n
   

2. 准备多语言数据，可以单独创建一个文件夹lang，里面包含多语言文件

   //zh.js
   export default {
     tip: '提示',
     submitText: '确定',
     cancelText: '取消',
   }
   

   //en.js
   export default {
     tip: 'tip',
     submitText: 'submit',
     cancelText: 'cancel',
   }
   

   //ja.js
   export default {
     tip: 'ヒント',
     submitText: 'を選択します',
     cancelText: 'キャンセル',
   }
   

3. 配置

   // index.js
   import { createI18n } from 'vue-i18n';
   import en from './en.js';
   import zh from './zh.js';
   import ja from './ja.js';
    
   const messages = {
     en,
     zh,
     ja
   };
    
   const i18n = createI18n({
     locale: localStorage.getItem('lang') || 'zh', // 设置默认语言
     fallbackLocale: 'zh', // 设置回退语言
     globalInjection:true, // 全局注入,可以直接使用$t
     messages, // 设置语言文件
   });
    
   export default i18n;
   

4. 引入

   //main.js
   import { createApp } from "vue";
   import App from "./App.vue";
   
   import i18n from "./lang/index"; // 导入i18n配置
    
   const app = createApp(App);
   app.use(i18n); // 注册i18n插件
   app.mount("#app");
   

5. 使用和切换

   //组件.vue
   <template>
     <p>{{ $t('title') }}</p>
     <button>{{ $t('submitText') }}</button>
     <button>{{ $t('cancelText') }}</button>
     <button @click='changeLange(lang)' v-for="lang in langs" :key="lang">切换语言为：{{lang}}</button>
   </template>
   <script setup>
   import { ref } from 'vue';
   const langs = ref([
     'zh','en','ja'
   ])
   const changeLange = (lang)=>{
     localStorage.setItem('lang',lang) // 利用本地存储，每次加载项目的时候，获取lang的值去设置对应语言数据
     window.location.reload()
   }
   </script>
   

   ​