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' 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>
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值