Skip to content

vue使用i18国际化配置语言

vue2使用 i18n

这里需要格外注意版本问题,我本地的 vue 版本为 2

☞ 安装

js
// vue版本 "vue": "2.6.10",
npm install --save vue-i18n@8.28.2

☞ 配置 安装完成以后我们建一个 i18n 文件夹,主要放我们国际化的配置

i18n/index.js

js
// i18n/index.js
import Vue from "vue";
import VueI18n from "vue-i18n";
Vue.use(VueI18n);
const messages = {
  zh: {
    //汉语
    message: {
      hello: "你好",
    },
  },
  en: {
    //英文
    message: {
      hello: "hello",
    },
  },
  rs: {
    //俄文
    message: {
      hello: "Здравствыйте",
    },
  },
  // 可以添加更多语言
};
const i18n = new VueI18n({
  locale: "zh", // 默认语言 
  fallback: "zh", // 后备语言
  messages, // 语言环境信息
});
export default i18n;

☞ 引入和挂载 在根目录入口文件main.js之中引入和挂载一下

js
import i18n from './i18n';

new Vue({
  el: "#app",
  i18n,
  router,
  store,
  render: h => h(App)
});

☞ 使用

接下来我们在项目之中使用i18n,例如写个i18n就可以写成这样子

JS
{{$t('message.hello')}}

☞ 显示

JS
英文: "hello"
中文:"你好"
俄文:"Здравствыйте"

vue3使用 i18n

Released under the MIT License.