一:准备流程

1. 安装vue-i18n,这里安装如下版本

                                            
//安装
npm install --save vue-i18n@5.0.3
                                            
                                        

2. 在src目录下新建language文件夹；在language新建en-US.json、zh-CN.json、index.js,index.js实现具体翻译功能;你可在任意地方执行事件动态改变Vue.config.lang = 'zh-CN'或者Vue.config.lang = 'en-US'

                                            
/**
 * 引入vue-i18n
 */
import Vue from 'vue'
import VueI18n from 'vue-i18n';
Vue.use(VueI18n);


/**
 * 导入iview自带语言包
 */
import zh from 'iview/dist/locale/zh-CN';
import en from 'iview/dist/locale/en-US';
/**
 * 导入APP json语言包
 */
import app_zh from './zh-CN.json'
import app_en from './en-US.json';
// 合并两个语言包
Vue.locale('zh-CN',Object.assign(zh,app_zh))
Vue.locale('en-US',Object.assign(en,app_en))
//获取本机系统语言
const navLang = navigator.language;  
const localLang = (navLang === 'zh-CN' || navLang === 'en-US') ? navLang : false;
const lang = window.localStorage.getItem('language') || localLang || 'zh-CN';

Vue.config.lang = lang   // 'zh-CN'、'en-US'
export default {}
                                            
                                        

3. 在main.js导入 language/index.js;main.js是我们实例化vue对象的入口文件

                                            
import language from './language'
...
...
...
new Vue({
    el: '#app',
    store,
    router,
    template: '',
    components: {App}
  })
                                            
                                        

4. 定义好翻译中英文json en-US.json 存放英文的json文件;zh-CN.json存放中文；下面先定义好几个数据；其中 "** 按钮 *********************************************":"",是json文件的一种注释方式

                                            
// zh-CN.json
{

    "** 按钮 *********************************************":"",
    "confirm":"确认",
    "new":"新增",
    
    "** placeholder **************************************":"",
    "queryname":"名称",
}


// en-US.json
{

    "** 按钮 *********************************************":"",
    "confirm":"confirm",
    "new":"new",

    "** placeholder **************************************":"",
    "queryname":"name",
    
}
                                            
                                        

二:应用场景

1. 翻译.vue文件template中的文字 通过$t('deleteMulti')方式拿到值就可以了，效果如下

                                            
<div style="margin:10px 5px">
        <Select v-model="queryOptions.rolevalue" style="width:200px" clearable>
            <Option v-for="item in selectOption.roleList" :value="item.value" :key="item.value">{{ item.label }}</Option>
        </Select>
        <Input v-model="queryOptions.username" :placeholder="$t('queryname')" clearable style="width: 200px" />
        <Button type="primary" icon="ios-search" style="margin:0;">{{$t('confirm')}}</Button>
        <Button type="warning"  @click="deleteSelected" style="margin:0;">{{$t('deleteMulti')}}</Button>
    </div>