vue项目如何实现多语言切换,国际化(i18n)

本文详细介绍了如何通过npm安装并配置Vue-i18n插件,实现基于sessionStorage的多语言环境切换,包括配置文件编写、目录结构、min.js中的引用以及在页面中使用国际化标签。还演示了如何监视i18n语言变化并更新数据。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1.下载i18n这个插件

npm i vue-i18n@8.27.0 (一定要指定版本,不然会报错)

2. 代码配置

  a.可以写在min.js 中,我是新写了一个文件,再引入到min.js中的

 //index.js
import Vue from 'vue';
import VueI18n from 'vue-i18n';
Vue.use(VueI18n);

//使用的是sessionStroage中存储的的lang,默认是中文简体cn

const i18n = new VueI18n({
    locale: window.sessionStorage.getItem('lang') || 'cn',//将i18n的locale设置为你需要的语言
    messages: {
        'cn': require("./zh"), //中文简体
        'en': require('./en'),//英文

    },
    //取消警告
    silentTranslationWarn: true,
})
export default i18n

b.目录结构

c.英文版的配置文件

//en.js   英文版
module.exports = {
  home: {
    'home': 'Home',
  },

}

 d.中文的配置文件

//zh.js  中文版文件
module.exports = {
     home: {
          'home': '首页',
      
     },
 
}

 3. min.js中需要引入,并声明


//引入lang.js文件
import i18n from './lang'

new Vue({
  //这里需要声明一下
  i18n,
  render: h => h(App)
}).$mount('#app')

4.页面中使用

//直接使用
<p> {{$t('home.home')}}<p/>,

//data中使用  不用加引号
 
<p> {{$t(text1)}}<p/>,
  export default {

  data() {
    return {
      text1:'home.home'
     
    }
  },


5.监视i18n的变化

  watch: {
    '$i18n.locale': {
     //当值不发生改变的时候的也可以执行  设置immediate: true
      immediate: true,
      handler(newName, oldName) {
        if (newName === 'cn') {
          this.dataList = [
            "index_1.jpg",
            "index_2.jpg",
            "index_3.jpg",]
        } else if (newName === 'en') {
          this.dataList = [
            "en-index_1.png",
            "en-index_2.png",
            "en-index_3.png",]
        }
      },
    },

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值