vue项目如何实现多语言切换，国际化（i18n）

最新推荐文章于 2025-06-26 09:37:54 发布

原创最新推荐文章于 2025-06-26 09:37:54 发布 · 702 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

本文详细介绍了如何通过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",]
        }
      },
    },