国际化-多语言实现方案-CSDN博客

本文链接：https://blog.csdn.net/qq_45229896/article/details/117460147

实现多语言的方式

实现多语言的方式有多种:
1.使用纯后端技术实现 在数据库中 配置之多种语言的内容 每次在登陆 或者选择语言的时候重新取数据库进行查询 带上语言的编码获取该语言的数据  相对对数据库的负担较大
2.纯前端的技术实现 (基于vue)
vue 中导入 i18n  npm install --save i18n
在src包下新建一个i18n的包,包下被配置多个语言的json格式文件
编写 一个i18n.js 配置 

import VueI18n from 'vue-i18n'   //引入vue-i18n
import Vue from 'vue'

Vue.use(VueI18n)
var locale;
localStorage.getItem('locale') ? locale = localStorage.getItem('locale') : locale = 'cn';
const i18n = new VueI18n({
  locale: locale,    // 语言标识
  messages: {
    'cn': require('./locales/cn'),   // 中文语言包
    'en': require('./locales/en'),   // 英文语言包
    'jp': require('./locales/jp'),   // 日文语言包
    'kr': require('./locales/kr')    // 韩文语言包
  },
})

export default  i18n

在main.js 中 把i18n 对象引入到vue对象中
import i18n from '@/i18n/i18n'
new Vue({
  el: '#app',
  router,
  i18n,
  store,
  template: '<App/>',
  components: { App }
})

3. 前后端配合完成多语言 基于方式二中的方式 对应语言的json数据 聪数据库中获取