博客

vue-i18n就是国际化应用，如果你想让你的软件支持多种语言，肯定需要用到，不过这里也是入门使用

1，安装

vue install vue-i18n

2,全局注入

Vue.use(VueI18n)

3，配置相关文件位置

这里messages部分就是你要用到的语言种类，分别引入地址，我这里存放在lang文件下的zhCHS 和en ,之所以是zhCHS是因为还有繁体，这里就展示中英文切换

const i18n = new VueI18n({
    locale: localStorage.getItem('languageSet') || 'zh', //从localStorage里获取用户中英文选择，没有则默认中文
    messages: {
        'zh': require('./lang/zhCHS'),
        'en': require('./lang/en')
    }
})

4，创建相关语言包文件，上面说了，在lang文件下，src的lang文件夹里面的zhCHS 和en

zhCHS .js

module.exports = {
    language: {
        name: 'English'
    },
    user: {
        login: '登录',
        register: '注册',
        loginUsername: '请输入邮箱/手机号',
        p: '我是中文',
    }
}

en.js

module.exports = {
    language: {
        name: '中文'
    },
    user: {
        login: 'login',
        register: 'register',
        loginUsername: 'please input email or phone',
        p: ' I’m chanese',
    }
}

5,我们少了一步挂载，现在在main的js的vue实例里面挂载i18n

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

router和store是路由和vuex，路由可能要用，希望配置一下，vuex是创建项目顺带装的，没有也可以的，i18n就是我们引入的插件

6，去到你想要展示切换按钮的页面，我这里设置在about页面


组件html部分

<div>
      <span>{{$t('user.login')}}</span>
    <input type="text" :placeholder="$t('user.loginUsername')"  v-model="username" />
    <p>{{$t('user.p')}}</p>
    <div @click="changeLanguage()">{{$t('language.name')}}</div>
    </div>

这一段我使用了一个登录文字，一个输入框，一个切换文字

i18n就是使用$t去引用他的插件，然后包含一个括号里面是引用的语言文字,比如登录文字就是用的user对象下的login文字，可以返回步骤4去看一下语言包


组件js部分

export default {
    name:'login',
    data(){
      return{
        username:''
      }
    },
     methods:{
        changeLanguage(){
            this.$i18n.locale=='zh'?this.$i18n.locale='en':this.$i18n.locale='zh'   //设置中英文模式
            localStorage.setItem('languageSet',this.$i18n.locale)   //将用户设置存储到localStorage以便用户下次打开时使用此设置
        },
        remind(){
            this.$toast(this.$t('user.loginUsername'))
        }
    }

  }

这个其实跑起来看一下就好了，使用$t，全部文件都可以引用语言包的文字切换，就是特别麻烦，每个都需要配置，不过确实人工翻译比较精准，但是也是很耗时间，然后下面是文件目录