前言：在一些网站经常可以看到切换语言包，将网站转化成多种语言版本的情况。最近项目中，也涉及到项目语言国际化的需求，在此记录一下。
一、实现思路
web项目多语言(i18n，即国际化)是比较常见的需求，常规的做法大概有以下几种：
1.每种语言单独开发页面，适用于CMS之类的网站；
2.多语言文本和页面结构分离，运行时动态替换，适用于单页应用(SPA);
3.直接用网页翻译插件，机器翻译。这种效果不太理想，同时也有一些局限性。
各个方案遇到的问题：
1.现在网上比较通用的，就是使用vue-i18n插件。这个插件就是上面第二种方案，用JSON文件管理多语言的文本资源，建立多语言的配置映射表，在vue组件模板里通过键名引用文本。但是管理这些英文键名比较麻烦，命名就很头疼。(VS Code有相关的插件，可以显示出对应的中文)；
2.使用Chrome游览器自带的Google翻译功能，首先机翻的效果会打折扣，最关键的是还会影响到功能的使用。由于项目是用Vue.js开发的单页应用，页面内容是用JS动态渲染的。有些对话框内的文字Google翻译就忽略了。另外，Google翻译只处理DOM文本节点，input输入框内的文字(包括placeholder)被忽略了。最严重的问题是，经过Google翻译处理后的DOM元素，失去了vue响应式特性，数据变化后DOM内的文字不会更新了。
鉴于以上情况，和项目的基本情况，此次选择的是第二种方案，语言配置文件和页面结构分离，也方便后期项目的扩展。采用静态翻译，也就是通过多语言配置文件映射。vue-i18n是每种语言准备一个JSON文件，属性名用英文，用命名空间（多层级对象）的方式避免命名冲突。
二、vue-i18n实现
1.安装vue-i18n插件

npm install i18n
npm i vue-i18n -save

安装后:package.json中

再看下node_modules中：

2.在main.js中引入

import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
//多语言实例
//多语言实例
const i18n = new VueI18n({
  locale:(function(){
    if(localStorage.getItem('lang')){
      return localStorage.getItem('lang')
    }
    return 'en'
  }()),
  messages:{
    'en':require('../../assets/language/en'), //英文语言包
    'portugal':require('../../assets/language/portugal'), //葡萄牙语言包
    'zh':require('../../assets/language/zhc'), //中文繁体包
  }
})

/* eslint-disable no-new */
new Vue({
  el: '#app',
  i18n,
  router,
  store,
  components: { App },
  template: '<App/>'
})

这些主要是多语言实例，因为切换语言的关系，可以将语言标识保存在localStorage中，记得一点就是一定要有默认语言，不然新设备访问的时候，localStorage中没有值就会出现bug。

3.建立语言包

语言包只要放在src下即可，然后语言包在main.js中引入

messages:{
    'en':require('../../assets/language/en'), //英文语言包
    'portugal':require('../../assets/language/portugal'), //葡萄牙语言包
    'zh':require('../../assets/language/zhc'), //中文繁体包
  }

在语言包里面怎么写：
其实，只需要将对应的键值对写好在module.exports导出即可使用。

4.使用
（1）在标签中使用

<div class="title">{{$t(licence.title1)}}</div>

(2)在input的placeholder中使用，其实就是vue中的v-bind

<input type="password" :placeholder="$t(login.password)" maxlength="24" v-model="log_password">

(3)在JS中使用

this.$t('login.clause')

(4)语言切换方法

Language(){
	if(this.$i18n.locale === 'zh'){
           this.$i18n.locale = 'en'
           localStorage.setItem('lang','en')
     }else{
            this.$i18n.locale = 'zh'
            localStorage.setItem('lang','zh')
     }

}

参考博客：vue项目中实现多语言(i18n) https://blog.csdn.net/u011574420/article/details/83141499
现有vue.js项目快速实现多语言切换的一种思路 https://www.cnblogs.com/lzkwin/p/13683526.html
vue项目中实现多语言切换 https://www.cnblogs.com/yangronghai/p/10408201.html
vue-cli使用vuei18n实现多语言前端项目 https://www.cnblogs.com/liu-26/p/14042098.html
vue前端vue-i18n实现翻译功能 https://www.jianshu.com/p/25c6626ba6b3