vuei18n国际化使用 3步走快速上手

5 篇文章 0 订阅

目录结构

在这里插入图片描述

准备翻译文件(本地化语言环境信息)

locale/lang.js 中准备中英文对照文本: (当然 你也可以将中英文分开 分别放在zh.js / en.js中)

const locale = {
	'zh-CN': {
		web: {
			title: '标题',
			content: '内容',
			view: '查看第{index}行', // 支持变量
		}
	},
	en: {
		web: {
			title: 'title',
			content: 'content'
			view: 'view {index} line', 
		}
	}
}

export default locale;

创建i18n实例

locale/index.js 中创建i18实例:

import Vue from 'vue';
import VueI18n from 'vue-i18n';
import messages from './lang';

Vue.use(VueI18n);

export function createI18n(lang = 'zh-CN') {
    return new VueI18n({
    	// 配置语言环境
        locale: lang,
        // 配置预设语言环境
        fallbackLocale: 'zh-CN',
        // 对照文本(本地化语言环境信息)
        messages,
        // 是否取消本地化失败时输出的警告(true: 禁止本地化失败警告)
        silentTranslationWarn: true,
    });
}

export default createI18n;
  1. i18n相关参数 可以参考 API参考
  2. 这里其实是运用了函数式编程的思想, 封装了一个工厂函数, 返回一个配置好的i18n实例。 这样做的好处是: 确保该组件的独立。仅在需要用的时候 直接调用, 获取返回值, 而没有其他行为。

挂载到vue上

通过cookie获取当前语言环境

// main.ts中
import Cookies from 'js-cookie';
let lang = Cookies.get('lang') || 'zh-CN';
  1. 这里是通过相应中的cookie获取当前的语言环境的;
  2. 安利一波js-cookie插件, 可以轻松的获取cookie中的值, 省的自己慢慢切了;

入口文件main.ts中挂载

// main.ts中
import Vue from 'vue';
import App from './app.vue';
import createI18n from '@/locale';

const i18n = createI18n(lang); // 这个lang就是上面从cookie中获取到的语言环境

new Vue({
		...vue相关的全家桶就不说了,
        i18n,
        render: h => h(App),
    });

使用$t

<template>
	<div>
	    <head>{{ $t('web.title') }}</head>
	    <div>{{ $t('web.content') }}</div>
	    <!-- $t的第二个参数是一个对象, 可以传递变量 -->
   	    <div>{{ $t('web.view', {index: 1}) }}</div>
	</div>
</template>

使用<i18n>标签

当中间的变量需要单独处理的时候(比如添加特殊样式), 可以使用标签的写法

<i18n path="web.view" tag="span">
    <span place="index" style="color: #fa541c;">{{ 123 }} </span>
</i18n>

上述写法 相当于给123 变量 添加了个span标签, 并设置了样式

当然 i18n远不止这些功能和设置, 还是很强大的一款插件, 详情可以查看文档 Vue i18n

好啦今天就分享到这里~!

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值