关于前端:前端通用国际化DI18n

1. 开发环境 vue
2. 电脑系统 windows10 专业版
3. 在开发的过程中, 咱们可能会须要开发不同语言, 这个时候就须要应用国际化, 上面我来分享一下通用的技术 DI18n.
4. 装置

npm i di18n-translate --save

5. 在 src 目录下新建 d18n, 在新建文件夹 langs, 目录构造如下:

6.en.js 代码如下:

module.exports = {'hello': 'hello, world',}

7.zh.js 代码如下:

module.exports = {'hello': '你好，世界',}

8. 在 main.js 中增加如下代码:

import DI18n from 'di18n-translate';
const di18n = new DI18n({
    locale: "en",  // 语言环境  
    isReplace: false, // 是否开始运行时 (实用于没有应用任何构建工具开发流程) 
    messages: {  // 语言映射表 
      en:require("@/d18n/langs/en.js"),
      zh:require('@/d18n/langs/zh.js')
    }
  })

  Vue.prototype.$d18n = di18n;

9. 在 vue 模板中应用

<p>{{$d18n.$t("hello") }}</p>

10. 语言切换

// 在对应办法中增加
this.$d18n.locale = "en";

11. 计划二 (目录构造为):

// 在 src 目录下新建 d18n 文件夹,
在 d18n 文件夹新建 langs 文件夹,
在 langs 文件夹下新建 en.js,zh.js;
在 d18n 文件夹新建 index.js

12.index.js 代码如下:

import DI18n from 'di18n-translate';
const di18n = new DI18n({
    locale: "zh",       // 語言環境
    isReplace: false,   // 是否進行替換 (適用於沒有应用任何構建工具開發流程)
    messages: {         // 語言映射表
      en:require("@/d18n/langs/en.js"),
      zh: require('@/d18n/langs/zh.js')
    }
  })

  export default di18n;

13.en.js 代码如下:

module.exports = {'hello': 'hello, world',}

14.zh.js 代码如下:

module.exports = {'hello': '你好，世界',}

15.main.js 代码如下:

import di18n from '@/d18n/index.js';

Vue.prototype.$d18n=di18n;

vue 模板的应用办法不变 

16. 本期的分享到了这里就完结啦, 心愿对你有所帮忙, 让咱们一起致力走向巅峰。