实现项目内容国际化（保姆级教程、超详细）

 在项目中我们经常会遇到支持多语言的情况，那么Vue也很人性化，给开发者提供了较为方便的插件，那么就来看看我们要如何引入插件以及完美的实现国际化多语言的流畅切换。

1、安装 i18n插件

// 1、使用npm的方式安装

 npm install vue-i18n

// 2、当然我们也可以使用CDN的方式快捷的引入

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-i18n/dist/vue-i18n.js"></script>

2、在Vue注入插

import Vue from 'vue'
import App from './App.vue'
import i18n from './lang/index.js'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.config.productionTip = false

new Vue({
  i18n,// 挂载
  ElementUI,
  render: h => h(App),
}).$mount('#app')

3、创建国际化语言包

// 在项目根目录下面创建文件夹lang，并在文件夹内创建index.js
Vue.use(VueI18n);
// 引入各个语言配置文件
import zh from './common/zh';// 自己创建的语言包js文件名
import zhn from './common/zhn';// 自己创建的语言包js文件名
import en from './common/en';// 自己创建的语言包js文件名
// 创建vue-i18n实例i18n
const i18n = new VueI18n({
    // 设置默认语言
    locale: 'zh', // 语言标识
    // 添加多语言（每一个语言标示对应一个语言文件）
    messages: {
        zh,
        en,
        zhn
    }
})
// 暴露i18n
export default i18n;


// 在lang文件夹下创建common文件夹方便管理语言包，在文件夹里面创建相应语言的js文件
// 列举：
       // 创建文件zh.js
       const m = {
             admin: '后台管理系统',
             test: '你好',
             language: {
                  zh: '中文',
                  en: 'English',
               },
           }
           export default zh;
       // 创建文件en.js
       const m = {
             admin: 'admin',
             test: 'hello',
             language: {
                  zh: '中文',
                  en: 'English',
               },
           }
           export default en;

4、在页面上使用

// 使用v-text渲染
<span v-text="$t('m.admin')"></span>
// 使用模版语法进行渲染
<span>{{$t('m.admin')}}</span>


/**
 * 切换语言 
 */ 
 changeLangEvent() {
   this.$confirm('确定切换语言吗?', '提示', {
       confirmButtonText: '确定',
       cancelButtonText: '取消',
       type: 'warning'
    }).then(() => {
       if ( this.lang === 'zh-CN' ) {
          this.lang = 'en-US';
          this.$i18n.locale = this.lang;//关键语句
       }else {
          this.lang = 'zh-CN';
          this.$i18n.locale = this.lang;//关键语句
       }
    }).catch(() => {
       this.$message({
           type: 'info',
       });          
    });

以上就是今天分享的内容啦，自己的一些学习分享，有大佬看出问题的可以指出哟！！！

拜拜咯