Vue多语言vue-il8n的使用

最新推荐文章于 2025-03-02 21:40:03 发布

熙冰

最新推荐文章于 2025-03-02 21:40:03 发布

阅读量2.1k

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/melodystars/article/details/104944495

版权

Vue 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了如何在Vue项目中使用vue-i18n进行多语言配置。主要包括安装vue-i18n, 创建lang文件夹，设置index.js, zh.js, en.js语言文件，以及在main.js中的引入和页面中的实际应用。" 130250147,7930366,科技查新报告撰写指南,"['科技查新', '课题查新', '项目立项', '科研立项', '文献检索']

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

安装

npm install vue-i18n --save

配置使用

建立lang文件夹，分别建立index.js，zh.js，en.js文件，然后在项目的入口文件main.js中引入

index.js

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import enLocale from './en'
import zhLocale from './zh'

Vue.use(VueI18n)

const messages = {
  en: {
    ...enLocale
  },
  zh: {
    ...zhLocale
  }
}

const i18n = new VueI18n({
  locale: 'zh', 
  messages
})

export default i18n

zh.js

export default {
  message: {
    test: '你好 世界'
  }
}

en.js

export default {
  message: {
    test: 'hello world'
  }
}

main.js

import i18n from './assets/lang'

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

页面中使用

<template>
  <el-card class="box-card">
    <div slot="header">
      <span>选择语言</span>
      <el-radio-group @change="handleChange" v-model="lang" style="float: right">
        <el-radio label="zh">中文</el-radio>
        <el-radio label="en">英文</el-radio>
      </el-radio-group>
    </div>
    <div>{{$t('message.test')}}</div>
  </el-card>
</template>

<script>
export default {
  name: 'i18n',
  data () {
    return {
      lang: 'zh'
    }
  },
  methods: {
    handleChange () {
      this.$i18n.locale = this.lang
    }
  }
}
</script>

<style scoped>
</style>