Vue项目+切换中英文+element国际化

GG·bond

已于 2022-01-21 14:46:08 修改

阅读量1.9k

点赞数

分类专栏： vue实际运用文章标签： vue+element国际化

于 2022-01-10 15:38:10 首次发布

本文链接：https://blog.csdn.net/GTbond/article/details/122411563

版权

这篇博客介绍了如何在Vue项目中实现中英文切换的基础版，包括使用vue-i18n插件，配置main.js，编写zh.js和en.js文件。同时，也详细讲解了ElementUI的国际化设置，涉及i18n文件目录创建，i18n.js和main.js的配置，以及页面中元素的语言切换。注意，ElementUI并非所有内容都自动支持语言切换，部分汉字需要手动替换。

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

vue项目中切换中英文（基础版）

1. 使用 vue-i18n 插件

安装：npm install vue-i18n
官网：https://kazupon.github.io/vue-i18n/zh/started.html 详情请看官网，本文仅基础使用

2. 在main.js文件加入i18配置

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

// 引入VueI18n
import VueI18n from 'vue-i18n'
//引入中英文js文件
import Chinese from './assets/zh.js'
import English from './assets/en.js'
//注册 VueI18n
Vue.use(VueI18n);
const i18n =new VueI18n({
  locale:'zh',  	//默认zh 语言
  messages:{
    en:English,
    zh:Chinese
  }
})
Vue.config.productionTip = false

new Vue({
  router,
  store,
  //添加进Vue实例里面
  i18n,
  render: h => h(App),
  beforeCreate(){
    Vue.prototype.$bus = this
  }
}).$mount('#app')