向现有的 Vuejs 应用程序添加 lang

Question

开始学习 VueJs。想知道如何添加国际化。咨询this VueJs documentation page：

开始使用
要设置可用的语言环境或当前语言环境，请在安装 Vuetify 时提供lang 选项。

问问自己，是否每个开始学习 VueJs 的人都考虑过国际化......

我的问题是有没有办法在创建 vuejs 应用程序之后添加 lang 选项。

Answer 1

我建议使用vue-i18n，因为它易于设置并且可以灵活地用于将来的添加。为了添加它：

npm install vue-i18n

然后，添加一个新插件：

import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
const messages = {   
  en: {     
    message: {       
      hello: 'hello'     
    }   
  },   
  fr: {     
   message: {       
     hello: 'Bonjour'     
   }   
  } 
}
export const i18n = new VueI18n({ locale: 'en', fallbackLocale: 'fr', messages });

之后，您可以将其导入您的 main.js 并添加到您的 vue 实例中。

import {i18n} from './plugins/i18n';
new Vue({i18n,...

终于可以在你的应用中使用它了：

<p>{{ $t("message.hello") }}</p>

我建议搜索更多有关该主题的内容，有很多资源。