转载自：https://www.cnblogs.com/fczbk/p/14468037.html
1、首先安装插件vue-i18n
|
1
|
npm install vue-i18n --save-dev
|
2、创建文件
en.ts 文件内容
|
1
2
3
4
5
6
7
8
|
module.exports = {
language: {
name:
'英文'
,
},
about: {
title:
'I am English'
,
},
};
|
zh.ts 文件内容
|
1
2
3
4
5
6
7
8
|
module.exports = {
language: {
name:
'中文'
,
},
about: {
title:
'我是中文'
,
},
};
|
index.ts
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
// 中英文切换
import Vue
from
'vue'
;
import VueI18n
from
'vue-i18n'
;
Vue.use(VueI18n);
const
i18n =
new
VueI18n({
locale: localStorage.getItem(
'languageStorage'
) ||
'zh'
,
messages: {
'zh'
: require(
'./zh'
),
'en'
: require(
'./en'
),
},
});
export
default
i18n;
|
3、在 mian.ts 引入i18n
|
1
2
3
4
5
6
7
8
|
import
i18n from
'./components/language/index'
;
new
Vue({
router,
store,
i18n,
render: (h) => h(App),
}).$mount(
'#app'
);
|
DEMO
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
<template>
<div
class
=
"about"
>
{{ language }}
<el-button-group>
<el-button @click=
"setLanguage('zh')"
>中文</el-button>
<el-button @click=
"setLanguage('en')"
>英文</el-button>
</el-button-group>
<h1>{{ $t(
'about.title'
) }}</h1>
</div>
</template>
<script lang=
"ts"
>
import
{ Component, Vue } from
'vue-property-decorator'
;
@Component
export
default
class
About
extends
Vue {
public language: string = localStorage.getItem(
'languageStorage'
) ||
'zh'
;
private
setLanguage(val: string) {
localStorage.setItem(
'languageStorage'
, val);
this
.language = val;
this
.$i18n.locale = val;
}
}
</script>
|