注意:本文使用的是 vue@3 + vue-i18n@9 的写法
一、安装
npm install vue-i18n@9 --save
二、新建 i18n 文件
文件目录结构如下:
在 index.js 下创建 i18n 实例
import { createI18n } from 'vue-i18n/index';
import zh from './lang/zh';
import en from './lang/en';
const i18n = createI18n({
// 设置地区
locale: localStorage.getItem('language') || 'zh',
// 设置语言环境信息
messages: {
zh,
en
},
});
export default i18n;
然后分别创建 zh.js 和 en.js 的语言包
// zh.js
export default {
message: {
resume: '生活不止眼前的苟且'
}
}
// en.js
export default {
message: {
resume: 'There is more to life than subsistence'
}
}
三、在 main.js 中引入
import { createApp } from 'vue'
import App from './App.vue'
import i18n from './i18n';
const app = createApp(App);
app.use(i18n);
app.mount('#app');
四、在模板中使用
在模板中使用
<div class="content">
{{ $t('message.resume') }}
</div>
写一个切换语言的方法
<template>
<button @click="toggle">切换</button>
</template>
<script>
export default {
methods: {
toggle() {
const curLang = localStorage.getItem('language');
const setLang = curLang == 'zh' ? 'en' : 'zh';
localStorage.setItem('language', setLang);
location.reload();
}
}
}
</script>
五、使用效果