Vue 页面语言切换

i18n 模块 语言国际化

首先在Vue项目中安装i18n模块

npm install vue-i18n --save

在src目录下创建文件夹lang(名字根据自己喜好)

在lang文件夹中创建两个js文件(这里做的是中英文切换,如果是多个国家语言文件同步增多)

//数据是key:value形式,根据对应的中英文转换填写
export const m = {
  name: '美多商城',
  home: '首页',
  shop: '商店',
  page: '更多',
  contact: '联系我们',
  welcome:'欢迎您'
};

打开Vue项目中main.js文件

//引入国际化组件
import VueI18n from 'vue-i18n';
Vue.use(VueI18n);
//调用语言包
const i18n = new VueI18n({
  //默认语言包
  locale: 'cn',
  //导入语言包
  messages: {
      //存放我们编写的语言文件的路径
    'cn': require('./lang/cn'),
    'en': require('./lang/en')
  }
});
......
new Vue({
  el: '#app',
  router,
  //装载语言包
  i18n,
  ......
});

在文件中修改文字

原来:
	<i>百度一下</i>
改变之后:
	m代表我们声明的常量名.在选择其中的参数
	<i>{{$t('m.name')}}</i>

在页面中添加点击修改语言的操作

<div v-width="150" >
    <Select v-model="select":datas="langs"@change="lang"></Select></div>
// v-model 绑定的是默认显示的语言
// :datas 绑定所有语言的列表
// @change 一旦数据改变立即做出反应

export default {
    name: 'myheader',
    data() {
      return {
        msg: "这是一个变量",
        select: 'cn',
          //多选列表
        langs: [
          {title: '中文', key: 'cn'},
          {title: 'English', key: 'en'}
        ]
      }
    },
    mounted: function () {
    },
    methods: {
      lang: function () {
          //一旦选中立马赋值
        this.$i18n.locale = this.select
      },
    }