Vue实现国际化 让你的代码走向国际化 vue+i18n(详细教程)

143 阅读1分钟

掘金4.webp

第一步:

先安装依赖啦

npm install vue-i18n -save

安装完接着就在main.js中引入 // 语言包

  1. 省略其他...

import i18n from '@/lang'

2 加入到根实例配置项中

new Vue({
      el: '#app',
      router,
      store,
 i18n,
      render: h => h(App)
})

3.进行配置

import VueI18n from 'vue-i18n'

Vue.use(VueI18n) // 通过插件的形式挂载

const i18n = new VueI18n({
  locale: 'zh-CN',    // 语言标识
  //this.$i18n.locale // 通过切换locale的值来实现语言切换
  messages: {
    'zh-CN': require('./common/lang/cn'),   // 中文语言包
    'en-US': require('./common/lang/en')    // 英文语言包
  }
})

如果需要别的语言,自己将语言包放入 ,并且引入即可

locale是设置当前语言的,后期需要切换时使用this.$i18n.locale=xx即可切换
require就是引入的语言包。这个需要自己配置,暂时没有办法自动搞。

找到路径新建js后,这就大功告成了。

使用时注意:html中 例如 `span等标签内包裹的内容 {{ $t ('navbar.companyName') }}

js中 例如 methods方法中 this.$t('navbar.xxxx')

对照文件en / zh 文件一一对照跟改 , 都是"体力活"

掘金66.webp