vue2中的i18使用

仅适用于vue2版本哦

1.安装

使用vue2+的官网kazupon.github.io/vue-i18n/zh…
npm安装：

//可以先查看所有版本
npm view vue-i18n versions --json
// 选择适用于vue2的版本安装
npm install vue-i18n@8.28.2 --save

2.创建文件夹

在assets文件夹下，新建language文件夹，并编辑文件

• 编辑index.js文件：

import Vue from "vue"; // 使用插件 
import VueI18n from "vue-i18n"; 
Vue.use(VueI18n); 
const i18n = { 
    locale: localStorage.getItem("lang") || "en", // 语言标识,第一次登录默认是英语
    messages: { 
    zh: require("./language/local.zh"), // 中文 
    en: require("./language/local.en"), // 英语 
    // 要多少语言就自己添加多少
    },
}; 
export default i18n;

• 新建 local.zh.js 和 local.en.js 文件

编辑中文和英文文件

• en.js

module.exports = { 
    main: { 
        title: "test theme color", 
        languageText: "change language", 
    },   
    // ..... 
};

• zh.js

module.exports = { 
    main: { 
        title: "测试主题色", 
        languageText: "切换语言", 
    }, 
};

3.在main.js中引用

import Vue from 'vue' 
import App from './App.vue' // 国际化配置相关 
import i18n from '@/assets/language/index.js' // 第一步：引入多语言配置文件index.js 
new Vue({ 
    render: h => h(App), 
    i18n // 第二步：挂载 i18n插件 
}).$mount('#app')

4.在页面中使用 $t("xxx") 即可

<div> {{ $t("main.title") }} </div>         
// js 中使用            
this.$t('main.title');

5. 切换语言

// 点击切换语言后调用
lang_change(value){   
    this.$i18n.locale = value;     
    // 存储到 cookie 或 session ....   
}