目录
1.安装i18n插件和elementUI插件
npm install vue-i18n --save
npm i element-ui -S
2.main.js全局挂载i18n和elementUI挂载
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
// 引入vuei18n
import VueI18n from 'vue-i18n'
// 以插件的形式
Vue.use(VueI18n)
//创建VueI18n实例
const i18n = new VueI18n({
locale: localStorage.getItem('language') || 'zh', //语言标识
messages: {
'zh': require('../src/assets/lang/zh'),
'en': require('../src/assets/lang/en')
}
})
new Vue({
router,
store,
i18n, // 注意这里也要加上,导出i18n!!!!
render: h => h(App)
}).$mount('#app')
本地语言资源包的位置,如下图
3.语言文件
en.js，代码如下
module.exports = {
i18n: {
breadcrumb: 'International projects',
tips: 'Change the language of the current content by switching the language button.',
btn: 'switch language',
title1: 'News sentence',
p1: "1. Open news web pages and contact tools every day to get together with the world. Some people refuse to alienate themselves from the world. But some people are alienated from themselves when they are close to the world, because your meaning does not occupy a position in it.",
p2: "2. News is like an onion, because as long as you peel off a layer of skin called truth, you can see another truth. Just like peeling an onion, the true facts can be obtained only after continuous doubt and evidence collection.",
p3: "3. In the face of absolute power, freedom of the press and innocence of speech are floating clouds."
}
}
zh.js，代码如下
module.exports = {
i18n: {
breadcrumb: '国际化项目',
tips: '通过切换语言按钮，来改变当前内容的语言。',
btn: '切换语言',
title1: '新闻的句子',
p1: '1、每天打开新闻网页和联络工具,与世界抱成一团。有人依此拒绝疏离，与世界的疏离。但有些人在与世界亲近的时候，却与自身疏离，因为你的意义所占据的位置不在其中。 ',
p2: '2、新闻像是洋葱,因为只要剥去一层名为真相的外皮，就可以看见另一个真相。就像剥去洋葱皮一样，通过不断怀疑与取证之后，才能够得到真正的事实。 ',
p3: '3、在绝对的权势面前,什么新闻自由、言论无罪，都是浮云。 ',
}
}
4.在组件中使用
第一种写法源码如下:
<template>
<div>
<el-card>
<span>{
{ $t("i18n.tips") }}</span>
<el-button type="primary" @click="$i18n.locale = $i18n.locale === 'zh' ? 'en' : 'zh'">{
{ $t("i18n.btn") }}
</el-button>
<div class="list">
<h2>{
{ $t("i18n.title1") }}</h2>
<p>{
{ $t("i18n.p1") }}</p>
<p>{
{ $t("i18n.p2") }}</p>
<p>{
{ $t("i18n.p3") }}</p>
</div>
</el-card>
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>
效果如下图
第二种写法源码如下:
<template>
<div>
<span>切换语言：</span>
<select v-model="selLocale" placeholder="切换语言">
<option value="zh">简体中文</option>
<option value="en">English</option>
</select>
<h2>{
{ $t("i18n.title1") }}</h2>
<p>{
{ $t("i18n.p1") }}</p>
<p>{
{ $t("i18n.p2") }}</p>
<p>{
{ $t("i18n.p3") }}</p>
</div>
</template>
<script>
export default {
name: 'Home',
data () {
return {
selLocale: this.$i18n.locale
}
},
watch: {
//切换多语言
selLocale (newValue) {
this.$i18n.locale = newValue;
localStorage.setItem("language", newValue);
console.log(this.$t("message.hello"));
console.log(this.$i18n.t("message.hello"));
}
},
}
</script>
效果如下图
第三种写法源码如下:
<template>
<div>
<!-- 切换语言-->
<el-dropdown trigger="click" @command="handleSetLanguage">
<div>
<span class="el-dropdown-link">
点击切换<i class="el-icon-arrow-down el-icon--right"></i>
</span>
</div>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item :disabled="language === 'zh'" command="zh">
中文
</el-dropdown-item>
<el-dropdown-item :disabled="language === 'en'" command="en">
English
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<h2>{
{ $t("i18n.title1") }}</h2>
<p>{
{ $t("i18n.p1") }}</p>
<p>{
{ $t("i18n.p2") }}</p>
<p>{
{ $t("i18n.p3") }}</p>
</div>
</template>
<script>
export default {
name: 'Home',
data () {
return {
selLocale: this.$i18n.locale
}
},
methods: {
handleSetLanguage (lang) {
this.$i18n.locale = lang;
this.language = lang;
localStorage.setItem("lang", lang);
},
//中英文切换
changeLang (val) {
let locale = this.$i18n.locale;
if (val == this.$t("English")) {
locale === "zh"
? (this.$i18n.locale = "en")
: (this.$i18n.locale = "zh");
localStorage.lang = this.$i18n.locale;
this.language = this.$t("English");
document.title = 456;
} else if (val == this.$t("中文")) {
locale === "zh"
? (this.$i18n.locale = "en")
: (this.$i18n.locale = "zh");
localStorage.lang = this.$i18n.locale;
this.language = this.$t("中文");
}
},
//表单验证及时更新
reload () {
this.isActiveRoute = false;
this.$nextTick(() => {
this.isActiveRoute = true;
});
},
},
created () {
this.account = window.localStorage.getItem("account");
this.activePath = window.sessionStorage.getItem("activePath");
if (this.$i18n.locale == "en") {
this.language = this.$t("English");
} else {
this.language = this.$t("中文");
}
},
watch: {
"$i18n.locale" (newVal, oldVal) {
if (newVal != oldVal) {
this.reload();
}
},
},
}
</script>
效果如下图
5.调用方法
div调用方法
{ { $t("i18n.title1") }}
js调用方法
this.$t('i18n.title1')
感觉文章好的话记得点个心心和关注和收藏，有错的地方麻烦指正一下，如果需要转载,请标明出处，多谢！！！