国际化插件 vue-i18n 使用方法
# 1、使用npm安装
npm install vue-i18n
1
# 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
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
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
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
2
3
# 6、vue-i18n 数据渲染的模板语法
我们知道 vue 中对于文字数据的渲染，有以{{}} 或者 v-text、v-html 等的形式，同样的使用国际化后，依旧可以沿用，但需要一点修改。
<span v-text="$t('title')"></span>
<!-- 或者 -->
<span>{{$t('title')}}</span>
1
2
3
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
2
3
4
5
6
7
8
9
10
11
上次更新: 2024/01/30, 00:35:17