Appearance
vue使用i18国际化配置语言
vue2使用 i18n
这里需要格外注意版本问题,我本地的 vue 版本为 2
☞ 安装
js
// vue版本 "vue": "2.6.10",
npm install --save vue-i18n@8.28.2
☞ 配置 安装完成以后我们建一个 i18n 文件夹,主要放我们国际化的配置
i18n/index.js
js
// i18n/index.js
import Vue from "vue";
import VueI18n from "vue-i18n";
Vue.use(VueI18n);
const messages = {
zh: {
//汉语
message: {
hello: "你好",
},
},
en: {
//英文
message: {
hello: "hello",
},
},
rs: {
//俄文
message: {
hello: "Здравствыйте",
},
},
// 可以添加更多语言
};
const i18n = new VueI18n({
locale: "zh", // 默认语言
fallback: "zh", // 后备语言
messages, // 语言环境信息
});
export default i18n;
☞ 引入和挂载 在根目录入口文件main.js之中引入和挂载一下
js
import i18n from './i18n';
new Vue({
el: "#app",
i18n,
router,
store,
render: h => h(App)
});
☞ 使用
接下来我们在项目之中使用i18n,例如写个i18n就可以写成这样子
JS
{{$t('message.hello')}}
☞ 显示
JS
英文: "hello"
中文:"你好"
俄文:"Здравствыйте"