这是我个人之前做项目的一点记录,如果有问题欢迎大家指正。
1、首先npm进行安装 : npm install vue-i18n
2、安装完成之后的main.js中配置
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
3、在assets文件下我创建了lang文件夹 里面包含zh.js en.js (这两个为中英文翻译);
之后在main.js中引入中英文翻译 如下:
const i18n = new VueI18n(
{
locale: window.localStorage.getItem('language') == null ? "zh" : window.localStorage.getItem('language'), // 语言标识
messages: {
'zh': require('./assets/lang/zh'),
'en': require('./assets/lang/en')
}
}
)
扩展:zh.js 如下
module.exports ={
home: {h1: '首頁', h2: '标题1', h3: '标题2', h4: '标题3', h5: '标题4'}, //页面1
home1: {h1: '首頁', h2: '标题1', h3: '标题2', h4: '标题3', h5: '标题4'}, //页面2
}
en.js和zh.js 内容和字段必须一一对应
使用时:<p>{{$t("header.h1")}}</p> input使用时为 $t('home.h1')