Function points:
1. Internationalization, switch between Chinese, English, and Traditional;
2. Set the default language of the page according to the browser's default language;
3. Manually switch languages;
4. Add internationalization to variables
effect:
1. Installation
npm install vue-i18n --save
2. Create a new locale folder in the src folder, and create en-US.js, zh-CN, and zh-TW files in the locale folder, and load the file index.js
en-US.js This is an English translation file
module.exports = {
navbar: {
English: 'English',
Chinese: 'chinese',
Tc: 'traditional Chinese',
homepage: 'home page',
personal: 'personal',
logout: 'logout',
language: 'language'
}
}
zh-CN.js This is a Chinese translation file
module.exports = {
//头部
navbar:{
English:'英文',
Chinese:'中文',
Tc:'繁体',
homepage:'首页',
personal:'个人中心',
logout:'退出登录',
language:'语言'
}
}
zh-TW.js This is a traditional translation file
module.exports = {
navbar: {
English: '英文',
Chinese: '中文',
Tc: '繁體',
homepage: '首頁',
personal: '个人中心',
logout: '退出登录',
language: '語言'
}
}
index.js is the loading file
//国际化
import Vue from 'vue'
import VueI18n from 'vue-i18n'
import {
localRead } from '@/libs/util'
import iView from 'view-design'
import customZhCn from './lang/zh-CN'
import customFtTc from './lang/zh-TW'
import customEnUs from './lang/en-US'
//引入iview的语言包，名字一定不能错，否则会报错
import zhCN from 'view-design/dist/locale/zh-CN'
import enUS from 'view-design/dist/locale/en-US'
import ftTC from 'view-design/dist/locale/zh-TW'
Vue.use(VueI18n)
// 自动根据浏览器系统语言设置语言
const navLang = navigator.language.substring(0, 2)//自动识别浏览器语言
const localLang = navLang || false
let lang = localLang || localRead('local') || 'zh'
Vue.config.lang = lang
Vue.locale = () => {
}
const messages = {
'zh': Object.assign(zhCN, customZhCn),
'en': Object.assign(enUS, customEnUs),
'tw': Object.assign(ftTC, customFtTc)
}
// 实例化i18n并引入语言文件。
const i18n = new VueI18n({
locale: lang, // 语言标识 // 默认语言
messages
})
Vue.use(iView, {
i18n: (key, value) => i18n.t(key, value)
})
export default i18n
3. Introduce in main.js and mount
import i18n from '@/locale'
Vue.use(i18n)
new Vue({
el: '#app',
router,
i18n,//挂载i18n
store,
components: {
App },
template: '<App/>'
}).$mount('#app')
4. Used on the page, the syntax { {$t('Variables defined in the language js file')}}
<DropdownMenu slot="list">
<DropdownItem name="ch">{
{
$t('navbar.Chinese')}}</DropdownItem>
<DropdownItem name="en">{
{
$t('navbar.English')}}</DropdownItem>
<DropdownItem name="tw">{
{
$t('navbar.Tc')}}</DropdownItem>
</DropdownMenu>
2. Manually switch languages
<Dropdown trigger="click" @on-click="handleClickDropdown2">
<a href="javascript:void(0)" style="color:#ffffff">
<div class="demo-avatar">
{
{
lang}}
</div>
</a>
<DropdownMenu slot="list">
<DropdownItem name="ch">{
{
$t('navbar.Chinese')}}</DropdownItem>
<DropdownItem name="en">{
{
$t('navbar.English')}}</DropdownItem>
<DropdownItem name="tw">{
{
$t('navbar.Tc')}}</DropdownItem>
</DropdownMenu>
</Dropdown>
export default{
data(){
return{
lang:''
}
},
methods:{
//语言选择
handleClickDropdown2(name){
if(name === 'ch'){
this.lang="中文"
this.$i18n.locale = 'zh'//这是在locale里Index.js定义的中文变量
}else if(name === 'en'){
this.lang="English"
this.$i18n.locale = 'en'
}else if(name === 'tw'){
this.lang='繁體'
this.$i18n.locale = 'tw'
}
},
}
}
Third, add internationalization functions to js variables1
, assign a value to a variable in the vue object in main.js
window.vm=new Vue({
el: '#app',
router,
i18n,
store,
components: {
App },
template: '<App/>'
}).$mount('#app')
2. Use in js
<div class="demo-avatar">{
{
lang}}</div>
export default{
data(){
return{
lang:window.vm.$t('navbar.language')//使用国际化
}
}
}