-
安装vue-i18n
npm install vue-i18n --save-dev
-
将i18n引入vue实例(main.js)中,在项目中实现调用API和模板语法。
import VueI18n from 'vue-i18n' //引入vue-i18n Vue.use(VueI18n); //通过插件的形式挂载 /*基本使用:创建i8n对象,方便全局调用*/ const i18n = new VueI18n({ locale: 'CN', // 语言标识 messages : { en: { message: { hello: 'hello world' } }, cn: { message: { hello: '你好、世界' } } } })
- 新建三个文件,lang(index.js,en.js,cn.js)
en.js和cn.js作为语言包,index.js作为语言模块,方便引入。通过 this.$i18n.locale
来进行语言的切换
en.js:
const messages = {
home: {
title: 'Book Store',
hint: 'Computer Science And Software Engineering',
guessYouLike: 'Guess You Like'}
}
cn.js:
const messages = {
home: {
title: '书城',
hint: '计算机科学和软件工程',
guessYouLike: '猜你喜欢',}
}
index.js
import Vue from 'vue'
import VueI18N from 'vue-i18n'
import en from './en'
import cn from './cn'
Vue.use(VueI18N)
const messages={
en,
cn
}
const i18n=new VueI18N({
en,//默认为英文
messages
})
export default i18n
4.模板语法渲染
//模板组件中直接使用
<span>{{$t('book.selectFont')}}</span>
//模板数据绑定使用
<input :placeholder="$t('message.zh')"></input>
//vue组件data中赋值的使用
data:{
msg:this.$t('message.zh');
}