Vue2 i18n多语言切换

随着公司发展壮大，很多情况下需要支持多语言，以下是实例，希望能帮助到需要的朋友，话不多说上代码

1、安装

yarn add vue-i18n

2、配置

src/main.js (后面遇到问题也整理进来，将i18n.locale属性配置放入Vue中来，你直接复制进去就行)

import {i18n, vantLocales} from './lang/locale'
vantLocales(i18n.locale)

//到这里你应该会发现一个问题，那就是第一次访问的时候并没有实现自动切换语言的功能，但是在localStorage中我们又可以看到lang已经被赋值，只有当页面再次刷新的时候才生效了。解决这个问题的办法就是将i18n.locale属性配置放入Vue中来，这样加载系统的时候就会自动去刷新i18n.locale属性了。
new Vue({
  router,
  i18n,
  created(){
    i18n.locale = localStorage.getItem('lang')
  },
  render: h => h(App),
}).$mount('#app');

src/router/index.js (router.beforeEach中配置)

router.beforeEach((to, from, next) => {
  if (!localStorage.getItem('lang')) {
    // let lang = navigator.language;//浏览器默认语言
    // console.log(lang)
    let lang = 'en';//默认英文语言包
    if (lang === 'zh' || lang === 'zh-CN') {
      localStorage.setItem('lang', 'zh')
    } else {
      localStorage.setItem('lang', 'en')
    }
  }
  next()
})

src/utils/request.js (后端接口请求也要对应语言，所以接口请求头里需要配置当前的环境语言)

在request请求拦截器增加如下配置

// request拦截器
service.interceptors.request.use(config => {
  // 是否需要设置 token
  // const isToken = (config.headers || {}).isToken === false
  const isToken = config.headers.token;

  // 多语言配置请求头
  let lan = localStorage.getItem('lang') || 'en';
  if(lan == 'en'){
    config.headers['Accept-Language'] = 'en;q=0.8' // 优先支持英文，没有则支持中文
  }else{
    config.headers['Accept-Language'] = 'zh-CN,zh;q=0.9' // 优先支持中文，没有则支持英文
  }
}, error => {
  console.log(error)
  Promise.reject(error)
})

src目录下新建 lang文件夹

在lang文件夹下新建locale.js、zh.js、en.js

zh.js

export default {
  //入口页面
  entry: {
    lanText: '切换语言',
    pageTitle:'客户管理',
    activity:'市场活动',
    approve:'活动审批',
  },
}

en.js

export default { 
// 入口页面
  entry: {
    lanText: 'Switch language',//切换语言
    pageTitle:'Customer Management',//客户管理
    activity:'Marketing Activity',//市场活动
    approve:'Activity Approval',//活动审批
  },
}

locale.js

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import {Locale} from 'vant'
import enUS from 'vant/lib/locale/lang/en-US'
import zhCN from 'vant/lib/locale/lang/zh-CN'
import enLocale from './en'
import zhLocale from './zh'
 
Vue.use(VueI18n)
 
const messages = {
    en: {
      ...enUS,
      ...enLocale
    },
    zh: {
      ...zhCN,
      ...zhLocale
    }
  }
  
  const i18n = new VueI18n({
    locale: localStorage.getItem('lang') || 'en',  // 设置默认语言（如果访问过页面先获取浏览器语言标识）
    messages: messages // 设置资源文件对象
  })
  
  // 更新vant组件库本身的语言变化，支持国际化
  function vantLocales (lang) {
    if (lang === 'en') {
      Locale.use(lang, enUS)
    } else if (lang === 'zh') {
      Locale.use(lang, zhCN)
    }
  }
  
  export {i18n, vantLocales}

页面中切换语言

<van-button icon="exchange" plain hairline type="info" size="small" round @click="changeLang">{{ $t('entry.lanText') }}</van-button>

//js部门
changeLang(){
    if(this.$i18n.locale == 'en'){
        this.$i18n.locale = 'zh'
        localStorage.setItem('lang','zh')
    }else{
        this.$i18n.locale = 'en'
        localStorage.setItem('lang','en')
    }
},

以上就是所有代码了，当然使用的时候语法有区别，需要注意，整理如下

js:


this.iconList = [
    {
        id:1,
        text:this.$t('entry.activity'),//市场活动
    },
    {
        id:2,
        text:this.$t('entry.approve'),//审批活动
    }
]

template:

<van-button icon="exchange" plain hairline type="info" size="small" round @click="changeLang">{{ $t('entry.lanText') }}</van-button>

属性绑定：( :placeholder 和 :label)

<van-field
    v-model="formData.residingCountry"
    required
    input-align="right"
    :placeholder="$t('entry.approve')"
    :label="$t('entry.approve')"
/>

结语：以上就是所有代码和注意事项啦，看到这里了，希望对你有所帮助噢~

Vue3多语言切换处理参考这篇文章

Vue2 i18n多语言切换

悦读