content
1. Install i18n plugin and elementUI plugin
npm install vue-i18n --save
npm i element-ui -S
2.main.js mounts i18n and elementUI globally
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')
The location of the local language resource pack, as shown below
3. Language files
en.js, the code is as follows
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, the code is as follows
module.exports = {
i18n: {
breadcrumb: '国际化项目',
tips: '通过切换语言按钮，来改变当前内容的语言。',
btn: '切换语言',
title1: '新闻的句子',
p1: '1、每天打开新闻网页和联络工具,与世界抱成一团。有人依此拒绝疏离，与世界的疏离。但有些人在与世界亲近的时候，却与自身疏离，因为你的意义所占据的位置不在其中。 ',
p2: '2、新闻像是洋葱,因为只要剥去一层名为真相的外皮，就可以看见另一个真相。就像剥去洋葱皮一样，通过不断怀疑与取证之后，才能够得到真正的事实。 ',
p3: '3、在绝对的权势面前,什么新闻自由、言论无罪，都是浮云。 ',
}
}
4. Use in components
The source code of the first writing method is as follows:
<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>
The effect is as follows
The source code of the second writing method is as follows:
<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>
The effect is as follows
The third way of writing the source code is as follows:
<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>
The effect is as follows
5. Invoke method
div call method
{ { $t("i18n.title1") }}
js call method
this.$t('i18n.title1')
If you feel that the article is good, remember to pay attention, pay attention and collect it. Please correct me if there is any mistake. If you need to reprint, please indicate the source, thank you! ! !