vue项目中英文切换（多语言国际化）-- i18n插件的用法

最新推荐文章于 2024-07-11 20:04:32 发布

树旅小爷

最新推荐文章于 2024-07-11 20:04:32 发布

阅读量2.9k

点赞数 2

分类专栏： Vue 文章标签： vue.js javascript node.js

本文链接：https://blog.csdn.net/milk_tiger/article/details/120777350

版权

本文介绍了如何在Vue项目中使用i18n插件实现多语言切换，包括安装插件、配置main.js、创建i18n文件夹及zh.js和en.js文件，以及在页面组件中使用$t方法和监听语言变化来调整样式。

摘要由CSDN通过智能技术生成

1.安装

npm install vue-i18n --save

2.在main.js文件中：

import i18n from './i18n/i18n'//我是把i18n单独放一个文件夹，这里是引用

new Vue({
   
  router,
  store,
  i18n,
  render: h => h(App)
}).$mount('#app')

3.在项目中单独建立一个i18n文件夹：

在这里插入图片描述

4.i18n文件夹里i18n.js内容：


import Vue from 'vue'
import i18n from 'vue-i18n'
Vue.use(i18n)

import zh from './config/zh.js'  //中文
import en from './config/en.js'	//英文

/*---------使用语言包-----------*/
const vueI18n = new i18n({
   
    locale: 'zh', //语言标识
    messages: {
     //使用语言包
        zh,
        en
    },
    silentFallbackWarn: true //仅在根本没有可用的转换时生成警告&