vue i18n实现语言切换

最新推荐文章于 2025-07-19 15:20:05 发布

码上云端

最新推荐文章于 2025-07-19 15:20:05 发布

阅读量856

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue vue-i18s 语言切换国际化

本文链接：https://blog.csdn.net/weixin_43817709/article/details/90705020

vue 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了使用vue-i18n实现语言切换和国际化的方法。需安装vue-i18n和cookie，新建lang文件及相关js文件，封装存取语言到cookie的方法，添加语言包，在main.js引入相关内容，在页面使用并通过watch方法监听语言切换。

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

1.使用vue-i18n实现语言切换,需要安装vue-i18n，使用cookie记录用户选择的语言，需要安装cookie

npm install vue-i18n
npm install js-cookie

2.新建lang文件，然后在该文件夹新建lang.js,封装setLang()和getLang()方法，用来把用户选择的语言存取到cookie

export default {
  setLang (lang) {
    window.localStorage.setItem('user_lang', lang)
  },
  getLang (defaultLang) {
    let localLang = window.localStorage.getItem('user_lang')

    if (localLang === null) {
      return defaultLang
    } else {
      return localLang
    }
  }
}

3.在lang文件加新建zh.js和en.js语言包

module.exports = {
  layout: {
    home: '首页',
    scan: '扫一扫',
    person: '个人'
  }
}

module.exports = {
  layout: {
    home: 'home',
    scan: 'scan',
    person: 'person'
  }
}

4.在main.js引入vue-i18n和lang.js

import VueI18n from 'vue-i18n'
import LangStorage from './lang/lang'

Vue.use(VueI18n)

const i18n = new VueI18n({
  locale: LangStorage.getLang('zh'),//调用lang.js的getLang()方法获取语言
  // locale: 'zh',
  messages: {
    'zh': require('./lang/zh'),//引入语言包
    'en': require('./lang/en'),//引入语言包
 
  }
})

new Vue({
  el: '#app',
  i18n,//使用i18n
  components: { App },
  template: '<App/>'
})

5.在页面使用

<mt-header :title="$t('layout.home')" >
       <span>{{$t('layout.home')}}</span>
        <select slot="left"   v-model='lang' class="lang">//语言切换
          <option value="zh">中文</option>
          <option value="en" >English</option>
          
        </select>
  </mt-header>
<!--在js使用-->
<script>
    alert(this.$t('layout.home'))
</script>

6.wacth方法监听语言切换

watch: {
    lang (val, olfval) {
      this.$i18n.locale = val//切换语言
      LangStorage.setLang(this.$i18n.locale)//把语言存到cookie
     
    }
  },

7.参考:https://www.jianshu.com/p/b022535713c3,https://www.cnblogs.com/listen9436/p/10525532.html