前端国际化学习

前端国际化是很多地方都能用到的,今天学习一下用 vue3 + vite + ts + vue-i18n 插件来开发前端国际化项目

1. 安装插件 vue-i18n

   npm install vue-i18n
   

2. 创建翻译文件
   -在 src 目录下新增 lang 目录,存放多语言文件
   -这里简单创建了两个文件,用于中英文翻译 后续可以继续添加多语言文件
   

   // en.ts
   export default {
    multilingual: {
     title: 'This is multilingual page!',
     input: "Please enter the content",
     button: "switch the language",
    }
   }
   // zh.ts
   export default {
    multilingual: {
     title: '这是多语言页面',
     input: "请输入内容",
     button: "切换语言",
    }
   }
   

3. 在vue中引入使用 vue-i18n

   // main.ts
   // 引入多语言模块
   import { createI18n } from "vue-i18n";
   // 引入cookie (使用了js-cookie用于便捷操作cookie)
   import Cookies from "js-cookie";
   // 引入多语言文件
   import enLocale from "./lang/en";
   import zhLocale from "./lang/zh";
   
   const messages = {
    en: {
     ...enLocale,
    },
    zh: {
     ...zhLocale,
    },
   };
   
   // 创建多语言实例
   const i18n = createI18n({
     legacy: false, // 使用3.x版本
     locale: Cookies.get("language") || "en", // 默认语言
     messages:messages, // 多语言配置
   });
   
   // 链式调用方法 createApp(App).use(i18n)
   app.use(i18n);
   

4. 使用多语言在页面内替换原本文字

   <template>
     <div class="multilingual">
   	<h1>{{ $t("multilingual.title") }}</h1> <!-- 普通文本使用方式 {{ $t('multilingual.title') }} -->
   	<input
   	  type="text"
   	  :placeholder="$t('multilingual.input')" 
   	/><!-- 标签内使用方式 :placeholder="$t('multilingual.password')" -->
   	<button @click="changeLanguage">{{ $t("multilingual.button") }}</button>
     </div>
   </template>
   
   <script lang="ts" setup>
   import Cookies from "js-cookie";
   import { useI18n } from "vue-i18n";
   
   const { t } = useI18n();
   console.log(t("multilingual.title")); // js内使用方式 t("multilingual.title")
   
   /**
    * 切换语言
    */
   const changeLanguage = () => {
     Cookies.set(
   	"language",
   	Cookies.get("language") === "zh" ? "en" : "zh",
     );
     window.location.reload(); // 刷新页面
   };
   </script>
   

   • 页面内效果

     • 中文
       

     • 英文