vue3项目中使用i18n国际化

vue3项目中使用i18n国际化

1、下载il8n插件，目前通过npm install vue-il8n下载的il8n版本是无法支持vue3.0，因此要使用npm install vue-i18n@next 来获取最新的版本，我这边是的版本是9.1.6

npm install vue-i18n@next  
或
yarn add vue-i18n@next

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' optionlocale: language.split("-")[0] || "zh",messages,
});export default i18n

注意上方标红代码，如果不设置为true挂载到全局的话，

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-linkv-for="(item,key) in $utes":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>