vue+vant多语言(国际化)

1.开发环境 vue+vant
2.电脑系统 windows10专业版
3.在开发的过程中,我们可能会需要适配多国语言,下面我来分享一下我的方法,希望对你有所帮助。
4.废话不多说,直接上操作:

// 在终端(管理员身份)
npm install vue-i18n --save

5.项目目录结构:

6.在src下新建i18n文件夹,在新建i18n.js并添加代码如下:

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import messages from './langs'

Vue.use(VueI18n)
const i18n = new VueI18n({
 locale: localStorage.lang || 'cn',
 messages
})

export default i18n

7.在i18n文件夹下新建langs文件夹,新建cn.js,代码如下:

const cn = {
    message: {
        'hello': '你好，世界',
    }
}

export default cn

8.在i18n文件夹下新建langs文件夹,新建en.js,代码如下:

//en.js
const en = {
    message: {
        'hello': 'hello, world',
    }
}

export default en

8-1.在i18n文件夹下新建langs文件夹,新建index.js,代码如下:

import en from './en'
import cn from './cn'
export default {
  en,
  cn
} 

9.在main.js中添加如下代码:

import i18n from '@/i18n/i18n';

new Vue({
 router,
 store,
 i18n,
 render: h => h(App)
}).$mount("#app");

10.如何在vue模板中使用呢?

{{$t('message.hello')}}
 // hello, world

11.如何切换语言呢?

data() {
    return {
        lang: 'en'
    }
},
methods: {
    switchLang()  {
        this.$i18n.locale = this.lang 
    }
}

通过改变this.$i18n.locale的值就可以自动切换页面的语言了

12.本期的分享到了这里就结束啦,希望对你有所帮助,让我们一起努力走向巅峰。