前端vue最新vue-i18n国际化插件实现语言切换(带源码)_前端中英文切换方案

1.安装i18n插件和elementUI插件

npm install vue-i18n --save
npm i element-ui -S
1
2

注意:建议安装指定低版本插件！！！

我就出现这种问题特意来修改一下文章,如果安装完后出现警示报告,说明vue与i18n的版本太高,与vue不能兼容,所以降低i18n的版本

warning  in ./node_modules/vue-router/dist/vue-router.esm-bundler.js
1

解决办法

降低版本,安装指定低版本,我用的下面的版本号,代码如下

npm i vue-i18n@8.27.1 --D
1

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')
  },
   silentTranslationWarn: true, // 去除国际化警告
})


new Vue({
  router,
  store,
  i18n, 				// 注意这里也要加上,导出i18n!!!!
  render: h => h(App)
}).$mount('#app')
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

本地语言资源包的位置,如下图

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."
  }
}

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

zh.js，代码如下

module.exports = {
  i18n: {
    breadcrumb: '国际化项目',
    tips: '通过切换语言按钮，来改变当前内容的语言。',
    btn: '切换语言',
    title1: '新闻的句子',
    p1: '1、每天打开新闻网页和联络工具,与世界抱成一团。有人依此拒绝疏离，与世界的疏离。但有些人在与世界亲近的时候，却与自身疏离，因为你的意义所占据的位置不在其中。 ',
    p2: '2、新闻像是洋葱,因为只要剥去一层名为真相的外皮，就可以看见另一个真相。就像剥去洋葱皮一样，通过不断怀疑与取证之后，才能够得到真正的事实。 ',
    p3: '3、在绝对的权势面前,什么新闻自由、言论无罪，都是浮云。 ',
  }
}
1
2
3
4
5
6
7
8
9
10
11

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

效果如下图

第二种写法源码如下:

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

效果如下图

第三种写法源码如下:

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85

效果如下图

第四种写法源码如下:

<template>
  <div>
    <span>切换语言：</span>
    <div class="languag">
      <span :class="flag? 'langSpan1' : 'langSpan2'" @click="getLang('zh')">CN</span>
      <span / </span>
      <span :class="!flag? 'langSpan1' : 'langSpan2'" @click="getLang('en')">EN</span>
    </div>
    <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 {
      title_list: [],
      flag: true,
      selLocale: this.$i18n.locale,
    }
  },
  methods: {
    getLang (lang) {
      this.selLocale = lang
    },
  },
  watch: {
    //切换多语言
    selLocale (newValue) {
      this.flag = !this.flag
      this.$i18n.locale = newValue;
      localStorage.setItem("language", newValue);
      if (newValue) {
        // console.log(newValue, 'val');
        this.title_list = [
          { title: this.$t('Home.Mytitle.Home'), active: true },
          { title: this.$t('Home.Mytitle.Shop'), active: false },
          { title: this.$t('Home.Mytitle.Pages'), active: false },
          { title: this.$t('Home.Mytitle.Elements'), active: false },
          { title: this.$t('Home.Mytitle.Home'), active: false },
          { title: this.$t('Home.Mytitle.Shop'), active: false },
          { title: this.$t('Home.Mytitle.Pages'), active: false },
        ]
      }
    },
  },
}
</script>

<style>
.langSpan1 {
  color: red;
}
.langSpan2 {
  color: blue;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60

效果如下图

5.调用方法

标签内调用

<div>{{ $t("i18n.title1") }}</div>

标签上调用

<el-input :placeholder="$t('lang.input.PleaseEnterTheRoleName')"></el-button>

js调用方法

  data () {
    return {
      message:this.$t('i18n.title1')
    }
  }
1
2
3
4
5

感觉文章好的话记得点个心心和关注和收藏，有错的地方麻烦指正一下，如果需要转载,请标明出处，多谢！！！