国际化插件 vue-i18n 使用方法

# 1、使用npm安装

npm install vue-i18n

# 2、在 main.js 中引入

将 vue-i18n 引入 vue 项目中，创建一个 i18n 实例对象，方便全局调用。同时通过 require 的形式引入 zh.js、en.js 语言包，通过 this.$i18n.locale 来进行语言的切换。

import Vue from 'vue'
import VueI18n from 'vue-i18n'
Vue.use(VueI18n) // 通过插件的形式挂载
let lang = window.sessionStorage.getItem("lang");
const i18n = new VueI18n({
    locale:lang?lang : 'zh-CN',    // 语言标识
    //this.$i18n.locale // 通过切换locale的值来实现语言切换
    messages: {
      'zh-CN': require('./lang/zh'),   // 中文语言包
      'en-US': require('./lang/en')    // 英文语言包
    }
})
new Vue({
  el: '#app',
  i18n,  // 不要忘记
  template: '<App/>',
  components: { App }
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# 3、en.js 英文语言包示例

module.exports = {
    title:"PiFlow Big Data Pipeline System",
    sidebar: {
        dashboard: "Dashboard",
        flow: "Flow",
        group: "Group",
        processes: "Process",
        template: "Template",
        data_source: "DataSource",
        example: "Example",
        admin: "Admin",
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13

# 4、zh.js中文语言包

module.exports = {
    title:"PiFlow大数据管理系统",
    sidebar: {
        dashboard: "仪表盘",
        flow: "Flow流程",
        group: "Flow分组",
        processes: "处理进程",
        template: "流程模板",
        data_source: "数据来源",
        example: "流程案例",
        admin: "用户管理",
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13

# 5、切换语言包的方法

this.$i18n.locale = val; //关键语句
 // 使用 localStorage 存储语言状态
window.sessionStorage.setItem("lang", val);

1
2
3

# 6、vue-i18n 数据渲染的模板语法

我们知道 vue 中对于文字数据的渲染，有以{{}} 或者 v-text、v-html 等的形式，同样的使用国际化后，依旧可以沿用，但需要一点修改。

<span v-text="$t('title')"></span>
<!-- 或者 -->
<span>{{$t('title')}}</span>

1
2
3

# 7、解决在data中绑定的数据视图不更新问题

computed: {
  menulist() {
    return [
      {
        btnName: this.$t("sidebar.dashboard"),
        icoName: "ios-home",
        router: "/"
      }
    ];
  } 
}

1
2
3
4
5
6
7
8
9
10
11

#Vue

上次更新: 2024/01/30, 00:35:17

← 利用create-nuxt-app脚手架创建NuxtJS应用在 vite-vue3.x 中的使用 vscode monaco-editor 方法→