关于vue.js:vuevant多语言国际化

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模板中应用呢?

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

11.如何切换语言呢?

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

通过扭转this.$i18n.locale的值就能够主动切换页面的语言了

12.本期的分享到了这里就完结啦,心愿对你有所帮忙,让咱们一起致力走向巅峰。