国际化——vuei8n

原创

已于 2022-06-05 11:51:24 修改 · 796 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端

于 2022-06-01 10:34:25 首次发布

本文介绍了如何在Vue.js应用程序中集成国际化功能，通过Vue I18n插件进行安装和使用，包括在main.js中导入、创建VueI18n实例以及设置和使用本地化信息。

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

安装

1、 npm install vue-i18n

2、main.js 导入或者是单独的文件

        import Vue from ' vue '

        import VueI18n from ' vue-i18n '

        Vue.use (VueI18n )

使用步骤

1、如果使用模块系统 (例如通过 vue-cli)，则需要导入 Vue 和 VueI18n ，然后调用 Vue.use(VueI18n)。

import Vue from 'vue'

import VueI18n from 'vue-i18n'

Vue.use(VueI18n)

2、准备翻译的语言环境信息

const messages = {
      en: {   //英文
          home: {
              hello: 'hello world',
              xx:xx,
              ...
          },
          goods:{

          }
      },
      zh: {   //中文
          home: {
              hello: '你好 世界',
              xx:xx,
              ...
          },
          goods:{