Vue I18n
- Vue.js 的国际化插件
- 官网地址建议通读。
- 使用前需要先在项目中install Vue-i18n
1 创建i18n文件夹
在项目根目录,即src目录项创建i18n目录,此目录下用于存放多语言的翻译如zh.js存储中文翻译,en.js存储英文翻译,id.js 存储印尼语等。
// en.js
export default {
basic: {
a: "Hello Word!"
}
}
// zh.js
export default {
basic: {
a: "你好~ 世界!"
}
}
2 创建preset文件夹
在项目根目录,即src目录下面创建preset目录,此目录下用于存放插件配置项预设,例如i18n.ts,router.ts,store.ts。
这里的i18n.ts 主要是为了引入 Vue-i18n且创建i18n实例。
import Vue from "vue";
import VueI18n from "vue-i18n";
import enLocale from "../i18n/en";
import zhLocale from "../i18n/zh";
Vue.use(VueI18n);
// lang 可以根据项目头上的切换语言组件选择的语言来决定
const locale = process.env.lang || "zh_CN";
const messages = {
"en-us": enLocale,
"zh_CN": zhLocale
};
const i18n = new VueI18n({
locale,
messages
});
// 项目中有些地方请求数据可能用到
localStorage.setItem("locale", locale);
export default i18n;
最后在vue 入口文件main.js中在 Vue创建实例的时候挂载i18n
import Vue from "vue";
import App from "./App";
import i18n from "./preset/i18n";
//部分其他省略
//....
new Vue({
el: "#app",
router,
i18n,
components: { App },
template: "<App/>"
});
在组件中如下使用
<template>
<div class="hello">
{{ $t("basic.a") }}
</div>
</template>
<script>
export default {
name: "HelloWorld",
data() {
return {
msg: "Welcome to Your Vue.js App"
};
}
};
</script>
效果图如下