本文已参与「新人创作礼」活动，一起开启掘金创作之路。

安装

# 由于vue版本2.5.2 ，之前下载i18n为9.x的报错了
npm install vue-i18n@8.26.7

在项目根目录 -> src 目录下新建 vuei8n目录 vuei8n目录下创建index.js

import VueI18n from 'vue-i18n'
// 引入语言包
import zh from './zh'
import en from './en'
import Vue from 'vue'
Vue.use(VueI18n)
const i18n = new VueI18n({
    locale: "zh", // 语言标识
    fallbackLocale: "zh",
    messages: {
        zh: {
            ...zh
        },
        en: {
            ...en
        }
    }
    // 不显示warn
    // silentTranslationWarn: true,
})

export default i18n

vuei8n目录下创建两个自定义语言包 zh.js 和 en.js

zh.js

const lang = {
    login: {
        loginBtn: '登录',
        title: '外卖Pro',
        phomeInputPlace: '请输入手机号',
        passwordInputPlace: '请输入密码',
        forgetPW: '忘记密码',
        mzhts: " 还没有账号？",
        registerNow: '立即注册'
    }
}
export default lang

en.js

const lang = {
    login: {
        loginBtn: 'login',
        title: 'TakeOut Pro',
        phomeInputPlace: 'Please enter your mobile phone number',
        passwordInputPlace: 'Please enter your password',
        forgetPW: 'Forgot password',
        mzhts: "Don't have an account yet?",
        registerNow: 'Register now'
    }
}
export default lang

在main.js 为Vue加入咱自己的i18n

import i18n from './vuei18n'
new Vue({
	el: '#app',
	i18n,
	router,
	store,
	components: { App },
	template: '<App/>'
})

在组件中，会默认注入一个 $t('key') 方法,对于要国际化的文本在 template使用 {{ $t('key')}},进行占位。

比如 上文en.js和zh.js 中的 login.loginBtn,可使用以下代码进行国际化

<div class="content-padded">
      <div @click="onLogin" class="button-login">
        {{ $t("login.loginBtn") }}
      </div>
</div>

在 this.$i18n.locale = 'zh' 时，`$t("login.loginBtn") 为 登录，this.$i18n.locale = 'en' 时，$t("login.loginBtn") 为 login`。

即：可以使用 this.$i18n.locale 进行语言切换。

案例如下图所示

相关文档

文档