vue支持多语言项目 vue-i18n

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

此篇文章主要了解：国际化多语言

 

首先，vue-i18n作为依赖安装

npm install vue-i18n　　// NPM安装
yarn add vue-i18n 　　　// yarn安装

在入口文件main.js中，引用vue-i18n并配置内容

// 引入依赖模块
import Vue from 'vue'
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
import zhLocale from './zh'　　// 语言包文件

// 配置语言内容
const messages = {
  en: {
    title: 'hello China',　
    // ...enLocale,　　// 引入英文语言包，避免内容过长，代码整洁
  },
  zh: {
    title: '你好 中国'
    // ...zhLocale,　　// 引入中文语言包，代替上一行内容列举，代码整洁
  }
}
// 使用语言包
const i18n = new VueI18n({
  locale: 'zh', 　
  // locale: VueCookie.get('language') || 'zh', // 使用vueCookie动态切换语言环境，默认中文
  messages
})

// 挂在全局使用语言

　　new Vue({

　　　　el: '#app',

　　　　i18n,

　　　　store,

　　　　router,

　　　　render: h => h(App)

　　})

// 模板内使用
<template>
　　<div>{{$t(about.title)}}</div>　　// $t()语法
</template>

// 语言包文件语法  zhLocale

module.exports = {
    about: {
        ttitle: '了解一下 i18n'   
    },
}