vue-cli项目简单实现国际化i18n

最新推荐文章于 2024-05-03 15:27:23 发布

爱前端的小怪兽

最新推荐文章于 2024-05-03 15:27:23 发布

阅读量743

点赞数

分类专栏： vue 文章标签： vue.js npm 前端

本文链接：https://blog.csdn.net/weixin_46724655/article/details/123225849

版权

vue 专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍了如何在Vue CLI项目中使用vue-i18n实现多语言支持，包括安装步骤、文件结构、配置详解和组件中使用示例。通过示例展示了如何在中英文间切换并展示相应的翻译内容。

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

vue-cli项目简单实现国际化

1.npm下载vue-i18n

vue-cli项目根路径下：

npm i vue-i18n

我下载的版本是：

"vue-i18n": "^7.6.0"

2.文件目录

在这里插入图片描述

3.文件内容

`en.js`

export const m = { 
  name: 'name',
  age: 'age'
}

`zh.js`

export const m = {
  name:'姓名',
  age:'年龄'
}

`index.js`

import Vue from 'vue'
import VueI18n from 'vue-i18n';

Vue.use(VueI18n);

const i18n = new VueI18n({
    locale: 'zh',    // 语言标识
    messages: {
      'zh': require('./config/zh'),   // 中文
      'en': require('./config/en')    // 英文
    }
})
export default i18n;

`main.js`

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// 引入国际化文件
import i18n from './lang/index'

Vue.config.productionTip = false

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

4.组件内容

<template>
  <div class="home">
    <h1>国际化</h1>
    <p>{{$t('m.name')}}</p>
    <p>{{$t('m.age')}}</p>
    <button @click="changeLang('en')">英文</button>
    <button @click="changeLang('zh')">中文</button>
  </div>
</template>

<script>

export default {
  name: 'Home',
  methods:{
      /**
       * 语言切换
       * @param {string} lang 语言类型
       * @return {void}
       */
      changeLang(lang){
          // 通过this.$i18n.locale来切换语言类型
          this.$i18n.locale=lang;
      }
  }
}
</script>