[JavaScript知识库]i18n创建与使用

1.vue-i18n 安装

## npm i vue-i18n -S

2.创建文件夹并挂载

2.1 在src目录下创建i18n w文件夹并且在里面创建一个index.js

2.2 在assets文件夹下面创建一个lang文件夹并且创建en.js 和 zh.js（不一定要放在assets下面）

2.3lang 下面的en.js 和 zh.js

2.3.1. en.js

	var en = {
  message: {
    one: 'one',
    two:'two',
    three;"three"
  },
}

export default en

2.3.2. zh.js

   var zh = {
     message: {
       one: '一',
       two:'二',
       three;"三"
     },
   }
   
   export default zh
   
   	

2.4 i18n 文件夹下面的index.js内容

import Vue from 'vue'
//引入vue-i18n
import VueI18n from 'vue-i18n'
//引入创建的zh.js 和 en.js，可以自己创建其他的语言，对应就行
import langZh from '@/assets/lang/zh.js'
import langEN from '@/assets/lang/en.js'
//挂载vue-i18n
Vue.use(VueI18n)
const messages = {
  zh: {
    ...langZh,
  },
  en: {
    ...langEN,
  },
}
//创建i18n实例
const i18n = new VueI18n({
  locale: 'en', // 语言标识
  messages,
})
///导出i18n 实例
export default i18n

2.5 在main.js里面设置

//1.导入我们写好的i18n/index.js
import i18n from '@/i18n/index.js'
//2. 挂载到app上
new Vue({
  i18n,
  router,
  render: (h) => h(App),
}).$mount('#app')

2.6 使用模板

{{ $t('message.hello') }}

2.7 语言的切换

this.$i18n.locale = 'zh';