阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      vue-i18n 教程

      Vue I18n

      Vue I18n 是 Vue.js 的国际化插件。它可以轻松地将一些本地化功能集成到你的 Vue.js 应用程序中。

      开始

      我们将在指南中的代码示例中使用 ES2015 语法。

      HTML

      <script src="https://unpkg.com/vue/dist/vue.js"></script>
      <script src="https://unpkg.com/vue-i18n/dist/vue-i18n.js"></script>
      
      <div id="app">
        <p>{{ $t("message.hello") }}</p>
      </div>
      

      JavaScript

      // 如果使用模块系统 (例如通过 vue-cli),则需要导入 Vue 和 VueI18n ,然后调用 Vue.use(VueI18n)。
      // import Vue from 'vue'
      // import VueI18n from 'vue-i18n'
      //
      // Vue.use(VueI18n)
      
      // 准备翻译的语言环境信息
      const messages = {
        en: {
          message: {
            hello: 'hello world'
          }
        },
        ja: {
          message: {
            hello: 'こんにちは、世界'
          }
        }
      }
      
      // 通过选项创建 VueI18n 实例
      const i18n = new VueI18n({
        locale: 'ja', // 设置地区
        messages, // 设置地区信息
      })
      
      
      // 通过 `i18n` 选项创建 Vue 实例
      new Vue({ i18n }).$mount('#app')
      
      // 现在应用程序已经准备好了!
      

      输出如下:

      <div id="#app">
        <p>こんにちは、世界</p>
      </div>
      

      NPM

      npm install vue-i18n
      

      Yarn

      yarn add vue-i18n
      

      如果在一个模块系统中使用它,你必须通过 Vue.use() 明确地安装 vue-i18n

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

      如果使用全局的 script 标签,则无须如此 (手动安装)。

      Vue Cli 3.x

      vue add i18n
      

      你需要 Vue cli 3.x 作为先决条件,你可以在命令行上使用下面的命令来安装:

      npm install @vue/cli -g
      

      开发版构建

      如果你想使用最新的开发版构建,就得从 GitHub 上直接 clone,然后自己构建一个 vue-i18n。

      git clone https://github.com/kazupon/vue-i18n.git node_modules/vue-i18n
      cd node_modules/vue-i18n
      npm install # or `yarn`
      npm run build  # or `yarn run build`
      
      目录
      目录