機能ポイント：
1。国際化、中国語、英語、従来の
言語の切り替え; 2。ブラウザのデフォルト言語に従ってページのデフォルト言語を設定;
3。言語を手動で切り替える;
4。変数に国際化を追加する
効果：
1.インストール
npm install vue-i18n --save
2. srcフォルダーにロケールフォルダーを作成し、ロケールフォルダーにen-US.js、zh-CN、およびzh-TWファイルを作成して、ファイルindex.jsをロードします。
en-US.jsこれは英語の翻訳ファイルです
module.exports = {
navbar: {
English: 'English',
Chinese: 'chinese',
Tc: 'traditional Chinese',
homepage: 'home page',
personal: 'personal',
logout: 'logout',
language: 'language'
}
}
zh-CN.jsこれは中国語の翻訳ファイルです
module.exports = {
//头部
navbar:{
English:'英文',
Chinese:'中文',
Tc:'繁体',
homepage:'首页',
personal:'个人中心',
logout:'退出登录',
language:'语言'
}
}
zh-TW.jsこれは従来の翻訳ファイルです
module.exports = {
navbar: {
English: '英文',
Chinese: '中文',
Tc: '繁體',
homepage: '首頁',
personal: '个人中心',
logout: '退出登录',
language: '語言'
}
}
index.jsはロードファイルです
//国际化
import Vue from 'vue'
import VueI18n from 'vue-i18n'
import {
localRead } from '@/libs/util'
import iView from 'view-design'
import customZhCn from './lang/zh-CN'
import customFtTc from './lang/zh-TW'
import customEnUs from './lang/en-US'
//引入iview的语言包，名字一定不能错，否则会报错
import zhCN from 'view-design/dist/locale/zh-CN'
import enUS from 'view-design/dist/locale/en-US'
import ftTC from 'view-design/dist/locale/zh-TW'
Vue.use(VueI18n)
// 自动根据浏览器系统语言设置语言
const navLang = navigator.language.substring(0, 2)//自动识别浏览器语言
const localLang = navLang || false
let lang = localLang || localRead('local') || 'zh'
Vue.config.lang = lang
Vue.locale = () => {
}
const messages = {
'zh': Object.assign(zhCN, customZhCn),
'en': Object.assign(enUS, customEnUs),
'tw': Object.assign(ftTC, customFtTc)
}
// 实例化i18n并引入语言文件。
const i18n = new VueI18n({
locale: lang, // 语言标识 // 默认语言
messages
})
Vue.use(iView, {
i18n: (key, value) => i18n.t(key, value)
})
export default i18n
3.main.jsで紹介してマウントします
import i18n from '@/locale'
Vue.use(i18n)
new Vue({
el: '#app',
router,
i18n,//挂载i18n
store,
components: {
App },
template: '<App/>'
}).$mount('#app')
4.ページで使用される構文{ {$ t（ '言語jsファイルで定義された変数'）}}
<DropdownMenu slot="list">
<DropdownItem name="ch">{
{
$t('navbar.Chinese')}}</DropdownItem>
<DropdownItem name="en">{
{
$t('navbar.English')}}</DropdownItem>
<DropdownItem name="tw">{
{
$t('navbar.Tc')}}</DropdownItem>
</DropdownMenu>
2.手動で言語を切り替える
<Dropdown trigger="click" @on-click="handleClickDropdown2">
<a href="javascript:void(0)" style="color:#ffffff">
<div class="demo-avatar">
{
{
lang}}
</div>
</a>
<DropdownMenu slot="list">
<DropdownItem name="ch">{
{
$t('navbar.Chinese')}}</DropdownItem>
<DropdownItem name="en">{
{
$t('navbar.English')}}</DropdownItem>
<DropdownItem name="tw">{
{
$t('navbar.Tc')}}</DropdownItem>
</DropdownMenu>
</Dropdown>
export default{
data(){
return{
lang:''
}
},
methods:{
//语言选择
handleClickDropdown2(name){
if(name === 'ch'){
this.lang="中文"
this.$i18n.locale = 'zh'//这是在locale里Index.js定义的中文变量
}else if(name === 'en'){
this.lang="English"
this.$i18n.locale = 'en'
}else if(name === 'tw'){
this.lang='繁體'
this.$i18n.locale = 'tw'
}
},
}
}
第三に、国際化関数をjs変数1に追加し
、main.jsのvueオブジェクトの変数に値を割り当てます。
window.vm=new Vue({
el: '#app',
router,
i18n,
store,
components: {
App },
template: '<App/>'
}).$mount('#app')
2.jsで使用する
<div class="demo-avatar">{
{
lang}}</div>
export default{
data(){
return{
lang:window.vm.$t('navbar.language')//使用国际化
}
}
}