vue 多语言开发

最新推荐文章于 2024-07-03 12:01:14 发布

勤奋的懒洋洋350

最新推荐文章于 2024-07-03 12:01:14 发布

阅读量354

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_64374806/article/details/132847071

版权

1.安装下载语言插件,Cookie

要注意版本号我安装的是 vue-i18n@8.24.5
npm install vue-i18n@8.24.5 -S        


npm i js-cookie -S

2.新建一个lang文件夹里面存放我们的语言翻译表

en.js引文各模块的英文包

import homePages from './modules/homePages/en'


export default {
    homePages,
}

index.js

// 进行多语言支持配置
import Vue from 'vue' // 引入Vue
import VueI18n from 'vue-i18n' // 引入国际化的插件包
import Cookies from 'js-cookie' // 引入 Cookies 保存当前默认语言选项
 
import elementEnLocale from 'element-ui/lib/locale/lang/en' // element-ui 英文包
import elementZhLocale from 'element-ui/lib/locale/lang/zh-CN'// element-ui 中文包
 
// 自定义的中英文配置
import enLocale from './en'
import zhLocale from './zh'
 
 
Vue.use(VueI18n); // 全局注册国际化包
 
// 创建国际化插件的实例
const i18n = new VueI18n({
  // 指定语言类型 zh表示中文  en表示英文 set locale 设置默认初始化的语言 i18n
  locale: Cookies.get('language') || 'zh',
  // 将将elementUI语言包 和自定义语言包 加入到插件语言数据里 set locale messages
  messages: {
    // 英文环境下的语言数据
    en: {
      ...enLocale,
      ...elementEnLocale
    },
    // 中文环境下的语言数据
    zh: {
      ...zhLocale,
      ...elementZhLocale
    }
  }
});

export function getLanguage () {
  const chooseLanguage = Cookies.get('language')
  console.log(chooseLanguage,'chooseLanguage');
  if (!chooseLanguage) {
    Cookies.set('language', 'zh-CN')
  }
  return Cookies.get('language')
}

export default i18n

zh.js引文各模块的中文包

import homePages from './modules/homePages/zh-CN'


export default {
    homePages,
}

3.main.js

// 切换语言
import i18n from './lang'
Vue.use(ElementUI, {
	i18n: (key, value) => i18n.t(key, value)
})

new Vue({
  el: '#app',
  i18n,
  render: h => h(App)
})

4.页面中使用

<template>
  <div class="hello">
    <h1>{{$t('homePages.systemName')}}</h1>
      <button
      style="margin-top: 10px"
      size="small"
      @click="switchLang"
      type="primary"
    >切换成{{lang === 'zh-CN' ? '英文' : '中文'}}</button>
  </div>
</template>

<script>
import Cookies from 'js-cookie'
import { getLanguage } from '@/lang'
export default {
  name: 'HelloWorld',
  data () {
    return {
      lang: getLanguage()
    }
  },
  methods:{
    switchLang() {
      const lang = this.lang === 'zh-CN' ? 'en' : 'zh-CN'
      this.lang = lang
      Cookies.set('language', lang)
      window.location.reload()
    }
  }
}
</script>

<style scoped>

</style>

中文效果展示：