如何用原生的方法写i18n

最新推荐文章于 2025-05-01 15:35:30 发布

快乐的大羊

最新推荐文章于 2025-05-01 15:35:30 发布

阅读量885

点赞数

本文链接：https://blog.youkuaiyun.com/weixin_41838204/article/details/80006317

版权

本文介绍如何利用di18n-translate插件实现原生的国际化(i18n)功能。首先通过npm安装插件，接着在页面中创建实例并利用setLocale方法设置语言。然后创建语言包，最后结合ajax实现动态语言切换。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先下载插件

npm i di18n-translate

之后在页面中应用

 
 < 
 script 
 src= 
 "./node_modules/di18n-translate/dist/di18n.min.js" 
 ></ 
 script 
 > 

创建实例

 
  const 
  di18n = 
  new 
  DI18n({ 
 
  locale: 
  'zh', 
 
  isReplace: 
  true, 
 
  messages: { 
 
  zh: { 
 
  msg1: 
  '' 
 
   } 
 
   } 
 
   });

插件中有一个方法

setLocale

之后再创建一个语言包

  //en.json 
 
   { 
 
  "en":{ 
 
  "msg1": 
  "hello", 
 
  "msg2": 
  "goodbye" 
 
   } 
 
   }

之后就使用ajax

 
  $. 
  ajax({ 
 
  url: 
  `./ 
  ${ 
  di18n. 
  locale 
  } 
  / 
  ${ 
  di18n. 
  locale 
  } 
  .json`, 
 
  method: 
  "get", 
 
  // success: function (res) { 
 
  // console.log(res); 
 
  // }, 
 
  // error:function(err){ 
 
  // console.log(err.responseText) 
 
  // }, 
 
  success 
  : 
  function ( 
  data) { 
 
  console. 
  log( 
  data) 
 
  di18n. 
  messages = 
  data; 
 
  // console.log(di18n); 
 
  di18n. 
  setLocale( 
  di18n. 
  locale, 
  function () { 
 
   }) 
 
   } 
 
   })