vue-i18项目国际化记录

长话短说，国际化是为了把中文翻译为其他的语言，项目中设置一个语言切换功能，点击不同的语言就可以实现项目语言的切换

安装

这里介绍vuei18去进行安装，并且一些简单的规则可以先去熟悉

https://kazupon.github.io/vue-i18n/zh/installation.html

这里简单介绍下流程

1、安装依赖

npm install vue-i18

2、在main.js中引入并且生命

import VueI18n from 'vue-i18n'
Vue.use(VueI18n)


const i18n = new VueI18n({
  locale: 'ch', // 语言标识，默认的语言
  messages: {
    'ch': i18nLang, //这里是对应文件的导入路径
    'en': i18nLang,
  },
  silentTranslationWarn: true
})


new Vue({
  el: '#app',
  router,
  store,
  i18n, //记得把i18放在new vue里面
  components: { App },
  template: '<App/>'
})

3、创建存放中英文的文件夹

这里需要着重的介绍下文件内容，我们先看一下这两个文件的内容

1、dxshare_Chinese.js

var i18nLang = {
    name:'名字'，
    sex:'性别'
}

2、dxshare_English.js

var i18nLang = {
    name:'name'，
    sex:'sex'
}

可以看到，上面都是两个js文件，里面都是对象的形式，我们项目中的所有中文，全部都需要放在dxshare_Chinese.js文件中，这里对象中的键名是自定义的，定义的a、b、c也行，值就是中文的意思

而在dxshare_English.js中同理，对象中也有键值对，但是这里的键名就不能是自定义了，而是同一个需要翻译的名词和dxshare_Chinese.js中的一一对应，比如dxshare_Chinese.js文件中的 “名字”的键名是name,在英文文件中键名也需要是name,至于值，就是专业的翻译人事给的值，我们前端人员就是对值进行替换

注意:在官网的列子中，或者其他博文中，中英文文件最后都会导出去，同时

const i18n = new VueI18n({
  locale: 'ch', // 语言标识，默认的语言
  messages: {
    'ch': i18nLang, //这里是对应文件的导入路径
    'en': i18nLang,
  },
  silentTranslationWarn: true
})

在ch、en后面接的是对应的文件路径，但是在本文中，不是用这种方式，我们可以看到，ch、en的值都是一样的，那在切换中，怎么去分辨不一样的文件，dxshare_Chinese.js、dxshare_English.js也没有导出对应的文件。关键点如下

使用

可以在项目src同级目录下的index.html文件中，对中英文翻译的文件进行引入。这里注意的是引入的是那个文件，页面就显示的是什么语言，下面先介绍下在代码中，我们怎么去替换代码中的中文。

一、代码中的替换

代码中分三中情况

1、template中

这里其实又分为两中情况，一种是标签内的中文，一种就是标签外的

标签外的中文

原文：

<p>名字<p>

翻译后:

<p>{{$t('name')}}</p>

标签内的中文

<input label='性别'></input>

翻译后:

<input :label='$t('sex')'></input>

2、script中

原文:

data(){
  return {
   name:"名字"
  }
}

翻译后:

data(){
  return {
   name:this.$t('name')
  }
}

3、style中

在CSS样式中出现中文其实很常见，比如伪元素中::after中content，我们是不是经常可能去写一些中文，替换方法如下

1、先去搜索下该伪元素是谁使用了，template中去找

2、替换伪元素中的中文

原文:

<p class='head--p'></p>


.head--p::after:{
  content:'性别'
}

翻译后:

<p class='head--p' :data-sex="$t('sex')"></p>


.head--p::after:{
  content:attr(data-sex)
}

这里可以看出，代码稍稍不一样，利用了H5新增的data- 自定义属性，不懂得小伙伴自行百度下哦，标签中的data- ，是前端很好用但是不常用的一个属性，在这里的写法中，注意的是arrt中的内容必须要和标签中绑定的一样。

二、语言文件的切换

当我们的翻译后，怎么去引入翻译的文件，这里我先去说个思路，当点击切换语言后，可以去保存它们的标识在本地储存中，然后我们在index.html文件中加上以下代码

 <script>
         var setLang = localStorage.getItem('choice_language');
      if(setLang != undefined){
        document.write('<script src="/static/language/dxshare_'+setLang.toLowerCase().replace(/( |^)[a-z]/g, (L) => L.toUpperCase())+'.js"><\/script>')      
      }else{
        document.write('<script src="/static/language/dxshare_English.js"><\/script>')
      }
    </script>

这段代码很好看懂吧，就是一个判断逻辑，这里再说一次，引入的是啥语言的翻译文件，页面上就显示什么语言，当然，是在你翻译完成之后。这里再看这段代码

const i18n = new VueI18n({
  locale: 'ch', // 语言标识
  messages: {
    'ch': i18nLang,
    'en': i18nLang,
  },
  silentTranslationWarn: true
})

为什么翻译文件不导出？为什么messages中没有引入路径，值都写的是一样的？

1、因为在index.html中动态的判断导入的文件

2、本文案列中，中英文翻译文件的对象都叫i18nLang

一些废话

初做翻译时，的确是一头雾水，官网内容看了、其他博文也看了不少，实践起来确实有着不少的问题，该文的列子可能与其他博文的方法不同，但也是在文件引入切换的方式上的区别，这只是适合我的方法，予以总结，与君共勉！