`vue-i18n`国际化

说明

地址：https://blog.csdn.net/Carry_COLD/article/details/122677409

Vue前端开发可能使用的一个模块，用于国际化

1. 安装

npm i vue-i18n -S

2. 编写国际化词汇文件

中英文转换为例子

• 文件名：i18n.js
• 位置：assets/lang/

export default {
    'zh-cn': {
        i18n: {
            breadcrumb: '国际化产品',
            tips: '通过切换语言按钮，来改变当前内容的语言。',
            btn: '切换英文',
            title1: '常用用法',
            p1: '要是你把你的秘密告诉了风，那就别怪风把它带给树。',
            p2: '没有什么比信念更能支撑我们度过艰难的时光了。',
            p3: '只要能把自己的事做好，并让自己快乐，你就领先于大多数人了。'
        }
    },
    'en': {
        i18n: {
            breadcrumb: 'International Products',
            tips: 'Click on the button to change the current language. ',
            btn: 'Switch Chinese',
            title1: 'Common usage',
            p1: "If you reveal your secrets to the wind you should not blame the wind for  revealing them to the trees.",
            p2: "Nothing can help us endure dark times better than our faith. ",
            p3: "If you can do what you do best and be happy, you're further along in life  than most people."
        }
    }
}

3. i18n配置

• 文件名：index.js
• 位置：src/i18n

import { createI18n } from 'vue-i18n'
import messages from '../assets/lang/'

const i18n = createI18n({
  locale: 'zh-cn', // 默认使用的国际化数据
  messages: messages, // 自定义的 中英文国际化数据
})

export default (app) => {
  app.use(i18n)
}

4. 挂载

• 文件名：main.js

//1.导入我们写好的i18n/index.js
import i18n from '@/i18n/index.js'
//2. 挂载到app上
new Vue({
  i18n,
  router,
  render: (h) => h(App),
}).$mount('#app')

5. 使用

// 使用
{{ $t('message.hello') }}

// 语言切换
this.$i18n.locale = 'zh';