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.jsconst 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.本期的分享到了这里就完结啦,心愿对你有所帮忙,让咱们一起致力走向巅峰。