有时候项目的页面需要能够切换多种语言来显示,可以使用vue-i18n这个插件库来实现功能
一、安装vue-i18n依赖
NPM
npm install vue-i18n
Yarn
yarn add vue-i18n
二、创建国际化文件夹和文件
1.在src根目录下新建i18n文件夹
2.i18n文件夹下新建i18n.js文件和langs文件夹
3.langs文件夹下新建语言文件(zh.js、en.js等)
三、配置i18n.js文件
创建i18n实例
import Vue from 'vue'
import VueI18n from 'vue-i18n'
import en from './langs/en.js' //英语
import zh from './langs/zh.js' //中文
Vue.use(VueI18n);
const i18n = new VueI18n({
locale: zh, //默认使用中文
messages: {
'zh': zh,
'en': en
}
})
export default i18n;
四、编写langs文件夹下的语言模板
1.zh.js