vue2-使用vue-i18n搭建多语言切换环境

安装

注意:vue2.0要用8版本的,使用9版本的会报错

复制代码
npm install vue-i18n@8.27.0 --save

创建相关的语言包文件

在src目录下,新建i18n文件夹

在新文件夹i18n中新建langs文件夹,里边放语言文本文件.js

zh.js:存放所有的中文显示内容

en.js:存放所有的英文显示内容

与langs文件夹同级,创建index.js:用于配置i18n,并导出i18n

zh.js
复制代码
export default {
    //中文
    变量名:"中文"
}
en.js
复制代码
export default {
    //英文
    变量名:"英文"
}
index.js
复制代码
import Vue from "vue"
import VueI18n from "vue-i18n"
//引入自定义语言配置  
import zh from './langs/zh'
import en from './langs/en'
import fan from './langs/fan'

Vue.use(VueI18n); // 全局注册国际化包

// 准备翻译的语言环境信息
const i18n = new VueI18n({
  locale: sessionStorage.getItem('lang') || "简", //将语言标识存入localStorage或sessionStorage中,首次默认中文显示,非首次则以localStorage为准
  messages: {
    // 繁体语言包
    '繁': {
      ...fan
    },
    // 中文语言包
    '简': {
      ...zh
    },
    //英文语言包
    'ENG': {
      ...en
    }
  },
  silentTranslationWarn: true, //解决vue-i18n黄色警告"value of key 'xxx' is not a string"和"cannot translate the value of keypath 'xxx'.use the value of keypath as default",可忽略
  globalInjection: true, // 全局注入
  fallbackLocale: '简', // 指定的locale没有找到对应的资源或当前语种不存在时,默认设置当前语种为中文
});

export default i18n

在main里导入语言包文件

main.js
复制代码
import i18n from './i18n'

Vue.use(
  {
    i18n: (key, value) => i18n.t(key, value) // 在注册Element时设置i18n的处理方法,可以实现当点击切换按钮后,elementUI可以自动调用.js语言文件实现多语言切换
  }
)

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

切换语言

复制代码
this.$i18n.locale = "ENG";//切换为英文

基本使用

1.在模板字符串中使用
复制代码
{{ $t("变量名") }}
<button>{{ $t("submit") }}</button>

2.绑定属性使用
复制代码
:属性名="$t('变量名')"
<input type="text" :placeholder="$t('FromSub.content.placeholder1')"/>
3.在script中使用
复制代码
this.$t('变量名')

注意:用这种方法在data(){}中获取的变量存在更新this.$i18n.locale的值时无法自动切换的问题,需要刷新页面才能切换语言。

解决方案:

1)调整写法

2)写在计算属性computed:{...}中,不要写在data(){return{...}}中

4.变量名不固定
复制代码
{{ $t(`msg.${msgss}`) }}//msgss是一个变量
相关推荐
山河木马4 分钟前
前端学C++可太简单了:双冒号 :: 操作符
前端·javascript·c++
3Katrina6 分钟前
前端面试之防抖节流(二)
前端·javascript·面试
前端进阶者12 分钟前
天地图编辑支持删除编辑点
前端·javascript
江号软件分享21 分钟前
无接触服务的关键:二维码生成识别技术详解
前端
江号软件分享21 分钟前
如何利用取色器实现跨平台色彩一致性
前端
灰海25 分钟前
封装WebSocket
前端·网络·websocket·网络协议·vue
前端小巷子36 分钟前
深入理解TCP协议
前端·javascript·面试
万少37 分钟前
鸿蒙外包的十大生存法则
前端·后端·面试
顽疲1 小时前
从零用java实现 小红书 springboot vue uniapp(13)模仿抖音视频切换
java·vue.js·spring boot
开开心心就好1 小时前
电脑息屏工具,一键黑屏超方便
开发语言·javascript·电脑·scala·erlang·perl