vue-i18n使用步骤详解(含完整操作步骤)

开篇

下面是从创建vue项目开始,完整使用i18n实现国际化功能的步骤,希望对您有所帮助。

完整步骤

创建项目

  • 创建项目,并在创建项目的时候选择vuex,router
  • 选择3.x版本
  • 后面随意选即可,下面是完整的代码结构

安装vue-i18n,并封装相关方法

  • 安装vue-i18n
html 复制代码
npm install vue-i18n@next
  • 在src下新建i18n文件夹,并在该文件夹下新建lang文件夹,下面存放数据源(zh.json,en.json)
javascript 复制代码
//zh.json
{
    "msg": {
        "hello": "你好,世界"
    }
}

// en.json
{
    "msg": {
        "hello": "Hello World"
    }
}
  • 在src下创建i18n/index.js
javascript 复制代码
import { createI18n } from "vue-i18n";
import zh from './lang/zh.json'
import en from './lang/en.json'
import store from '@/store'

const messages = {
    zh,
    en
}

// 返回当前lang
function getCurrentLang() {
    return store.getters.lang // 获取当前语言
}

const i18n = createI18n({
    //这里选择false是为了配合使用vue3的composition API风格的新式API,
    //如果是vue2,就要选择true了
    legacy: false, 
    globalInjection: true, // 全局注入
    locale: getCurrentLang(),
    messages
})

export default i18n
  • 在vuex下添加一个模块来管理当前语言(store/index.js)
javascript 复制代码
import { createStore } from 'vuex'

export default createStore({
  state: {
    locale: 'en', // 默认语言
  },
  getters: {
    lang: state => state.locale
  },
  mutations: {
    SET_LOCALE(state, locale) {
      state.locale = locale
    }
  },
  actions: {
    setLocale({commit}, locale) {
      commit('SET_LOCALE', locale)
    }
  },
  modules: {
  }
})
  • 在main.js中注册i18n实例
javascript 复制代码
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// 注册i18n
import i18n from './i18n'

createApp(App).use(store).use(router).use(i18n).mount('#app')

封装LangSelect组件,实现一键切换语言

  • 在src/components下新建LangSelect组件,并定义切换语言的方法
javascript 复制代码
<template>
    <div>
        <select v-model="selectedLocale" @change="changeLang">
            <option value="en">English</option>
            <option value="zh">中文</option>
        </select>
    </div>
</template>

<script>
import { computed } from "vue";
import {useStore} from 'vuex';
import {useI18n} from 'vue-i18n'

export default {
    setup() {
        const store = useStore();
        const { locale } = useI18n();

        const selectedLocale = computed({
            get: () => store.state.locale,
            set: (value) => {
                store.dispatch('setLocale', value)
                locale.value = value; // 更改i18n语言
            }
        })

        const changeLang = () => {
            locale.value = selectedLocale.value
        }

        return {
            selectedLocale,
            changeLang
        }
    }
}
</script>
  • 在App.vue中引入并使用LangSelect.vue组件,实现一键切换语言
javascript 复制代码
<template>
  <div id="app">
    <LangSelect/>
    <p>{{ $t('msg.hello') }}</p>
  </div>
</template>

<script>
import LangSelect from './components/LangSelect.vue'

export default {
  components: {
    LangSelect
  }
}
</script>

<style></style>
  • 当前效果如下:

以上便是vue-i18n的详细使用步骤,希望对您有所帮助。实际项目中,可能使用方式比上面复杂很多,比如说封装方法需要在store或者pinia中建立单独的模块,LangSelect组件样式要更复杂,但万变不离其宗,总体的步骤依然是上面这些。

相关推荐
懒大王爱吃狼41 分钟前
Python教程:python枚举类定义和使用
开发语言·前端·javascript·python·python基础·python编程·python书籍
待磨的钝刨2 小时前
【格式化查看JSON文件】coco的json文件内容都在一行如何按照json格式查看
开发语言·javascript·json
Devil枫5 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
GIS程序媛—椰子6 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
前端青山7 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
毕业设计制作和分享7 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
程序媛小果7 小时前
基于java+SpringBoot+Vue的旅游管理系统设计与实现
java·vue.js·spring boot
从兄8 小时前
vue 使用docx-preview 预览替换文档内的特定变量
javascript·vue.js·ecmascript
凉辰9 小时前
设计模式 策略模式 场景Vue (技术提升)
vue.js·设计模式·策略模式
清灵xmf9 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询