vue项目实现国际化

一.安装vue-i18n 三种方式

1.script引入

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

2.npm安装

npm i vue-i18n -S

3.yarn 安装

 yarn add vue-i18n

二.配置

1.添加相关文件

213.png

2.i18n文件夹下的index.js文件

import Vue from 'vue';
import VueI18n from 'vue-i18n';
Vue.use(VueI18n);
// 引入各个语言配置文件
import zh from './config/zh';
import en from './config/en';
// 创建vue-i18n实例i18n
const i18n = new VueI18n({
    // 设置默认语言
    locale:localStorage.getItem('locale') || 'zh', //语言标识
    // 添加多语言(每一个语言标示对应一个语言文件)
    messages:{
        zh, //中文 
        en, //英文
    }
})

export default i18n;

3.单个语言页面的配置

// 英文
const en = {
    name:'name',
    info:{
        age:'male'
    }
}

export default en;

// 中文
const zh = {
    name:'姓名',
    info:{
        age:'男'
    }
}

export default zh;

4.在main.js引入i18n

import i18n from "./i18n";
new Vue({
  router,
  store, 
  i18n, //注意：一定要加进去
  render: h => h(App),
}).$mount("#app");

三.使用

   <div>
      <h3>vue国际化</h3>
      <p>{{$t("name")}}</p>
      <p>{{$t("info.age")}}</p>
    </div>
    <button @click="changeType('zh')">切换中文</button>
    <button @click="changeType('en')">切换英文</button>

    // 国际化类型
    changeType(type){
      //此处做了语言选择记录
      localStorage.setItem('locale',type);
      //修改显示语言
      this.$i18n.locale = type;
    },