美文网首页
vue多语言实现

vue多语言实现

作者: 浮若年华_7a56 | 来源:发表于2022-09-19 10:02 被阅读0次

    1.安装

    npm ibstall vue-il8n
    

    2.在main.js里配置il8n

    import Vue from 'vue'
    import VueI18n from 'vue-i18n'
    Vue.use(VueI18n)
    

    3.创建il8n实例在main.js中挂载
    3-1.实例文件夹:

    import VueI18n from 'vue-i18n'
    const i18n = new VueI18n({ // 双语
      locale: 'zh',
      messages: {
        'zh': require('./components/lang/zh'),
        'en': require('./components/lang/en')
      },
    })
    export default i18n;
    

    3-2.main.js里引用挂载

    import i18n from '@/lang'
    var vue = new Vue({
      el: '#app',
      i18n,
    })
    

    4.实现切换语言
    4-1.vue2

    Language(lan){
     this.$i18n.locale = lan
     localStorage.setItem('lang',lan)
    }
    

    4-2.vue3

    import { useI18n } from "vue-i18n";
    setup(props, context) {
      const { locale,t } = useI18n();
      const languageChange = (lan) => {
       locale.value = lan;
       localStorage.setItem("lang", lan);
     };
     return {
       t,
       languageChange
     };
    },
    

    5.显示文字
    5-1.vue2使用
    html部分

    <input type="text" :placeholder="$t('user.loginUsername')"  v-model="username" />
    

    js部分

    this.$t('user.loginUsername')
    

    5-2.vue3使用
    html部分(跟vue2一样)

     <input type="text" :placeholder="$t('user.loginUsername')"  v-model="username" />
    

    js部分

     // 引入il8n配置文件
    import i18n from '../../../language/index'
    i18n.global.t('user.loginUsername')
    

    相关文章

      网友评论

          本文标题:vue多语言实现

          本文链接:https://www.haomeiwen.com/subject/dsxportx.html