这里所说的国际化，是根据访问者的浏览器语言来更改页面语言。
首先，需要导入一个插件:
1
| npm install vue-i18n --save
|
在main的js中注册该组件:
1
2
3
4
|
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
|
在src目录下新建lang文件夹，在文件夹中新建zh.js和en.js文件
在两个文件中(如果不止是中文和英文的话就再新建对应的文件)输入对应的文本，具体内容按自己需求而定，这是我自己的zh.js文件内容:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
export const m = {
'index':'美多商城',
'home': '主页',
'shop': '商店',
'page': '页面',
'contact': '联系我们！',
'register': '注册',
'login': '登录',
'logout': '登出',
'welcome': '欢迎您',
}
|
这是我的en.js文件内容:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
export const m= {
'index': 'Mei Duo SHop',
'home': 'Home',
'shop': 'Shop',
'page': 'Page',
'contact': 'Contact',
'register': 'Register',
'login': 'Login',
'logout': "Logout",
'welcome': 'Welcome!'
}
|
然后再在main.js中加入以下内容，注意要放在上次写的语句下面:
1
2
3
4
5
6
7
8
9
10
11
|
const i18n = new VueI18n({
locale: 'en',
messages:{
'zh': require('./lang/zh'),
'en': require('./lang/en'),
}
})
|
在new Vue中加入以下内容:
为了方便理解，我把我的new Vue内容写出来:
1
2
3
4
5
6
7
8
9
| new Vue({
el: '#app',
router,
i18n,
components: { App },
template: '<App/>',
render: h => h(App)
})
|
这个i18n就是上面定义的const i18n = new VueI18n中的i18n。
到了这里就差不多了，那么接下来该调用了，在需要国际化的地方输入以下内容:
如:
1
2
3
| <div v-if="username===''">
<router-link to='/register'>{{$t('m.register')}}</router-link>
<router-link to='/login'>{{$t('m.login')}}</router-link>
|
其中
是固定语法，m是之前在js文件中定义的，register和login是之前在js文件中设置的键。注意加上引号。
为了方便访问者选用语言，这里我做出了这样的代码(这里使用了heyui，返回false或者true):
1
| <h-switch v-model="lang" @change="language_change">中/English</h-switch>
|
在data中添加lang变量:
1
2
3
4
5
| data(){
return {
lang: 0
}
}
|
这里说明一下lang的值，因为使用的是heyui，所以默认是0，即”false”，不过即便不是使用的heyui，其也有存在的的必要，具体请看以下代码，这是在methods中:
1
2
3
4
5
6
7
8
9
10
11
| language_change:function(){
console.log(this.lang);
if(this.lang === true){
this.$i18n.locale = 'en';
localStorage.setItem('lang', 'en');
}
else if(this.lang === false){
this.$i18n.locale = 'zh';
localStorage.setItem('lang', 'zh');
}
}
|
这里说一下为什么这样写: 之前已经提到过，heyui的h-switch标签返回false或true，因为v-model的缘故，变量lang也会变为false或true，所以根据这个原理来判断，如果不使用heyui可以写一个button，点击使lang变成true或false。
如果用户点击了按钮，那么便存在本地一个值，以后每次登陆就按照存在本地的值判断选择哪个语言。如果用户是第一次登陆，那么根据浏览器语言来自动选择语言:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| mounted:function(){
if(localStorage.getItem('lang') === 'zh'){
this.lang = false;
this.$i18n.locale = 'zh';
}
else if(localStorage.getItem('lang') === 'en'){
this.lang = true;
this.$i18n.locale = 'en';
}
else if(navigator.languages[0]==='zh-CN'){
this.$i18n.locale='zh';
}
else if(navigator.languages[0] === 'en'){
this.$i18n.locale = 'en';
}
}
|
navigator.languages[0]是你浏览器的首选语言，次选语言是navigator.languages[1]，第三语言是navigator.languages[2]以此类推。
