当前位置: 首页 > 工具软件 > Vue I18n > 使用案例 >

Vue i18n的安装,使用与卸载

应安国
2023-12-01

前提条件

  • 已安装nodejs
  • 通过打包工具如webpack开发vuejs项目
  1. 安装
    打开控制台,切换目录至项目根目录,执行以下命令

    	npm install vue-i18n
    
  2. 使用
    在入口文件中(如main.js)

    //引入包
    import Vue from 'vue'
    import App from './App' //Vue入口组件
    import VueI18n from 'vue-i18n'
    Vue.use(vueI18n )
    //定义多语言内容
    const messages = {
       en: { hello: '你好' },
       ja: { hello: 'こにちは' },
       zh: { hello: '你好' }
    }
    //创建实例
    const i18n = new VueI18n({
      locale: 'zh', //设置默认语言
      messages //设置多语言内容
    })
    new Vue({
      i18n,
      el: '#app',
      components: {
        App
      },
      template: '<App/>'})
    

    在vue文件中使用

    <template>
       <label>{{$t('hello')}}</label>
    </template>
    <script>
    methods: {
      hello () {
        //javascript中获取多语言文字
        this.$t('hello')
        //更改i18n语言
        this.$i18n.locale = 'ja'
      }
    }
    </script>
    
  3. 卸载
    打开控制台,切换目录至卸载i18n项目根目录,执行以下命令

    npm uninstall vue-i18n
    
 类似资料: