vue中使用vue-i18n实现国际化配置以及js中语言切换

最新推荐文章于 2025-06-26 09:37:54 发布

原创最新推荐文章于 2025-06-26 09:37:54 发布 · 1.4w 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#vue+element ui #vue-i18n

vue+element ui 同时被 2 个专栏收录

3 篇文章

订阅专栏

vue-i18n

1 篇文章

订阅专栏

本文介绍如何使用Vue-i18n和js-cookie配合Vuex实现应用的状态管理和国际化支持。通过配置多语言资源文件和设置语言切换逻辑，使得应用程序能够根据不同语言环境显示对应的内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用vuex进行状态管理

首先需要下载vue-i18n以及js-cookie：

npm i vue-i18n

npm i js-cookie

目录文件：

|-- src

|-- components //组件

|-- changeLang.vue

|-- store

|-- index.js

|--modules

|-- routes.js

|-- lang // 语言库

|-- en.js // 英文

|-- zh.js // 中文

|-- index.js // 入口文件

|-- main.js

|-- app.vue

在main.js里面配置：

 import 
 i18n 
 from 
 './lang'

  Vue.
  use(
  ElementUI, {
 
 
  i18n
  : (
  key, 
  value) 
  => 
  i18n.
  t(
  key, 
  value)
 

  })
 

  new 
  Vue({
 
  el: 
  '#app',
 
  router,
 
  store,
 
  i18n,
 
  template: 
  '<App/>',
 
  components: {
  App}
 
  })

lang--index.js

en.js:

 export 
 default {

 
  version: {
 
  info: 
  'authorization info',
 
  email: 
  'EMaill',
 
  vs: 
  'version number '
 
   }
 
  }

zh.js:

 export 
 default {

 
  version: {
 
  info: 
  '授权信息',
 
  email: 
  '邮箱',
 
  vs: 
  '版本号'
 
   }
 
  }

routes.js：

 import 
 Cookies 
 from 
 'js-cookie'

  const 
  routes = {
 
 
  state: {
 
 
  language: 
  Cookies.
  get(
  'language') || 
  'zh'
 

      },
 
  getters: {
 
  language
  : 
  state 
  => {
 
  return 
  state.
  language
 
   }
 
   },
 
  mutations: {
 
  set_language
  : (
  state, 
  language) 
  => {
 
  state.
  language = 
  language
 
  Cookies.
  set(
  'language', 
  language)
 
   }
 
   }
 
  }
 
  export 
  default 
  routes

语言切换组件changeLang.vue：

在相应位置引用此组件即可。

在页面上绑定：

 <span>{{
 $t(
 'version.email')}}</span>

   <
   el-form-item 
   :label="
   $t(
   'table.license_no')" 
   prop=
   "license"
   >
  
 
   <
   el-input 
   v-model="
   dataform.
   license" 
   :disabled="
   disabled" 
   :placeholder="
   $t(
   'table.license_no')"
   ></
   el-input
   >
  

   </
   el-form-item
   >
  

如果某些js中含有字符需要切换语言（包括rules），需要写在computed中。

js中语言切换：

  computed: {
 
  rules1 () {
 
  return {
 
  upImg: [
 
   {
  required: 
  true, 
  message: 
  this.
  $t(
  'table.face_idnotEmpty'), 
  trigger: 
  'blur'}
 
   ]
 
   }
 
   }
 
    }