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.本期的分享到了这里就完结啦,心愿对你有所帮忙,让咱们一起致力走向巅峰。