1、下载il8n插件,目前通过npm install vue-il8n下载的il8n版本是无法支持vue3.0,因此要使用npm install [email protected] 来获取最新的版本,我这边是的版本是9.1.6
npm install [email protected]
或
yarn add [email protected]
2、在src下面创建一个名为language的文件名,并在文件下面创建zh、enjs文件(中文、英文),本文只做中英文切换作为案例,后续可加更多版本
3、然后在四个js文件中写入对应的方法,这里面存放的是我们要进行切换的语言,以下是我在名为zh.js文件写的中文语言,同样的方法在其他文件中依次写入
export default {
message: {
Home: '首页',
About: '关于我们',
productService: '产品服务',
cases: '行业解决方案',
news: '新闻动态',
contactUs: '联系我们',
},
}
4、在language文件下面在创建一个index.js文件
import en from './en'
import ch from './zh'
export default {
en,
ch,
}
5、创建一个i18n.js文件
import { createI18n } from 'vue-i18n' //引入vue-i18n组件
import messages from './index'
const language = (
(navigator.language ? navigator.language : navigator.userLanguage) || "zh"
).toLowerCase();
const i18n = createI18n({
fallbackLocale: 'ch',
globalInjection:true,
legacy: false, // you must specify 'legacy: false' option
locale: language.split("-")[0] || "zh",
messages,
});
export default i18n
注意上方标红代码,如果不设置为true挂载到全局的话,
{{$t(`message.name`)}}这种使用会报错
6、在main.js中引入
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import i18n from './language/i18n'
createApp(App)
.use(router)
.use(i18n)
.mount('#app')
这时候就已经可以在页面中使用国际化了。
<router-link
v-for="(item,key) in $router.options.routes"
:to="item.path"
:key="key"
>
{{$t(`message.${item.name}`)}}
</router-link>
设置中英文切换按钮/事件
<div @click="change('zh')">中文</div>
<div @click="change('en')">English</div>
<script>
import { getCurrentInstance } from "vue";
export default {
name: "App",
setup() {
const { proxy } = getCurrentInstance();
function change(type) {
proxy.$i18n.locale = type;
}
return { change };
},
};
</script>