cnd使用
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-i18n/dist/vue-i18n.js"></script>
</head>
<body>
<div id="app">
<p>{{ $t("message.hello") }}</p>
</div>
<script>
// 准备翻译的语言环境信息
const messages = {
en: {
message: {
hello: 'hello'
}
},
cn: {
message: {
hello: '你好'
}
}
}
// 通过选项创建 VueI18n 实例
const i18n = new VueI18n({
locale: 'cn', // 设置地区
messages, // 设置地区信息
})
// 通过 `i18n` 选项创建 Vue 实例
new Vue({ i18n }).$mount('#app')
// 现在应用程序已经准备好了!
</script>
</body>
</html>
image.png
NPM安装
npm install vue-i18n
语言格式化
const messages = {
en: {
message: {
hello: '{msg} world'//msg相当于变量
}
}
}
<p>{{ $t('message.hello', { msg: 'hello' }) }}</p>
msg相当于变量赋值
列表格式
const messages = {
en: {
message: {
hello: '{0} world'
}
}
}
<p>{{ $t('message.hello', ['hello']) }}</p>
<p>{{ $t('message.hello', {'0': 'hello'}) }}</p>
复数
const messages = {
en: {
car: 'car | cars',
apple: 'no apples | one apple | {count} apples'
}
}
<p>{{ $tc('car', 1) }}</p>
<p>{{ $tc('car', 2) }}</p>
<p>{{ $tc('apple', 0) }}</p>
<p>{{ $tc('apple', 1) }}</p>
<p>{{ $tc('apple', 10, { count: 10 }) }}</p>
一般使用
import Vue from 'vue'
import App from './App.vue'
import Vue18n from 'vue-i18n'
//使用引入
Vue.use(Vue18n);
//定义标识符
const i18n = new Vue18n({
locale: 'zh-CN', // 语言标识
//this.$i18n.locale // 通过切换locale的值来实现语言切换
messages: {
'zh-CN': require('./common/lang/cn'), // 中文语言包
'en-US': require('./common/lang/en') // 英文语言包
}
})
Vue.config.productionTip = false
new Vue({
i18n,
render: h => h(App),
}).$mount('#app')
image.png
image.png
image.png
其他使用查看文档
https://kazupon.github.io/vue-i18n/zh/introduction.html
网友评论