vue使用i18n实现国际化的方法详解
版权申诉
164 浏览量
2020-12-10
10:59:48
上传
评论
收藏 160KB PDF 举报
vue使用使用i18n实现国际化的方法详解实现国际化的方法详解
一、前言一、前言
在4k广告机中需要实现多语言切换，这时候接触到国际化，前端框架无数，其中几种热门的框架都有相匹配的国际化插件工
具。比如：
vue + vue-i18n
angular + angular-translate
react + react-intl
jquery + jquery.i18n.property
在4K广告机项目中使用的前端框架为Vue，故而我们将使用vue-i18n这个插件进行国际化功能的实现。
二、最终实现效果二、最终实现效果
三、国际化的实现三、国际化的实现
1、首先在自己的项目中安装 vue-i18n依赖包。这里使用NPM进行安装，如果没有科学上网请使用CNPM进行安装。
npm install vue-i18n --save-dev
2、将i18n引入vue实例中，在项目中实现调用API和模板语法。现在在main.js中引入 vue-i18n。
import VueI18n from 'vue-i18n' //引入vue-i18n
Vue.use(VueI18n); //通过插件的形式挂载
/*---------基本使用-----------*/
const i18n = new VueI18n({
locale: 'CN', // 语言标识
messages : {
en: {
message: {
hello: 'hello world'
}
},
cn: {
message: {
hello: '你好、世界'
}
}
}
})
/*---------使用语言包-----------*/
资源评论
