Vue 国际化

国际化

安装

Vue-Cli3 使用下面命令

vue add i18n

然后可能会报错

TypeError: _ctx.$t is not a function 

解决办法

在创建国际化组件时，加上一个属性

globalInjection: true,

默认位于/src/i18n.js

本地国际化

最新版本还支持本地文件国际化，使用方法如下：

  {{ t('hello') }}





import { defineComponent } from 'vue'
import { useI18n } from 'vue-i18n'

export default defineComponent({
  name: 'HelloI18n',
  setup() {
    const { t } = useI18n({
      inheritLocale: true,
      useScope: 'local'
    })

    // Something todo ..

    return { t }
  }
})



{
  "en": {
    "hello": "Hello i18n in SFC!"
  }
}

语言选择

添加语言选择功能

  
    
      
        
          
        
      
    
  





export default {
  name: 'locale-changer',
  data() {
    return {
      langs: [
        {
          value: 'zh_CN',
          label: "简体中文"
        },
        {
          value: 'en_US',
          label: "English"
        }
      ]
    }
  },
  methods: {
    langChanged(lang) {
      console.log("langChanged=>", lang);
      localStorage.Lang = lang;
    }
  },
  mounted() {
    if (localStorage.Lang != null) this.$i18n.locale = localStorage.Lang;
  }
}

参考

https://github.com/intlify/vue-i18n-next/issues/350

https://stackoverflow.com/questions/56854403/vue-i18n-how-to-keep-language-after-refresh-access-i18n-locale-in-js-runtime