vue3实现国际化的过程与遇到的问题详解

目录
  • 前言
  • 安装引入
  • 使用
  • 遇到的问题
  • 总结

前言

开发了一个国际化的项目，技术栈是vue3 + TS + vite + vant + pinia, 需要设置多语言，采用的是vue-i18n这一个国际化插件，貌似只看到英文文档，而且网上找的其他教程大部分是针对vue2的，对应vue3的比较少，所以自己整理了一下

安装引入

npm install vue-i18n

在src下新建locals文件夹,包含index.js,en.js,zh.js(只做中英文切换)

// zh.js
export default {
    login: {
        login: '登录',
        userName: '用户名'，
        password: '密码'
    }
}
// en.js
export default {
    login: {
        login: 'login',
        userName: 'userName'，
        password: 'password'
    }
}
// index.js
import { createI18n } from 'vue-i18n'
import zh from './zh'
import en from './en'

const messages = {
  en,
  zh,
}
const language = (navigator.language || 'en').toLocaleLowerCase() // 这是获取浏览器的语言
const i18n = createI18n({
  locale: localStorage.getItem('lang') || language.split('-')[0] || 'en', // 首先从缓存里拿，没有的话就用浏览器语言，
  fallbackLocale: 'en', // 设置备用语言
  messages,
})

export default i18n

有个注意的地方就是上面用了缓存，待会会说到为什么要这样做

最后在main.js引入就好了

import { createApp } from 'vue'
import i18n from './locals'

const app = createApp(App)
app.use(i18n)

app.mount('#app')

至此插件就算配置好了，接下来使用的话基本上就两种场景，一是在<template>里面,一种是在setup里面

使用

  • 在<template>中使用

要用到一个$t()的方法，或者使用v-t也行

<div>
    {{`$t('login.userName')`}}
</div>
<div v-t="'login.password'"></div>

关于$t()还有很多用法，可以动态传参等，具体还是去官网看看

  • 在setup中使用
<script setup lang="ts">
import { useI18n } from 'vue-i18n'

const { t } = useI18n()

console.log(t('login.useName'))
</script>

目前项目中只采用这两种方式，还有其他的就不展开了

  • 切换语言

vue-i18n提供了一个全局变量locale，直接修改即可

<template>
	<div class="menu">
    	<div class="menu-item" @click="changeLang('en')">English</div>
    	<div class="menu-item" @click="changeLang('zh')">中文</div>
    </div>
</template>
<script setup lang="ts">
import { useI18n } from 'vue-i18n'
const { locale } = useI18n()

const changeLang = (lang: string) => {
  locale.value = lang
  localStorage.setItem('lang', lang)// 重要！下面遇到问题里解释
}
</script>

遇到的问题

  • 切换语言后，跳转页面或者刷新当前页后语言又重置了

这是因为切换语言是修改的全局变量locale，当页面一刷新，相当于又重置为默认值了，所以上面采用缓存来解决

  • 使用ref或者reactive设置的文字，切换语言后不更新

这是因为这里的数据是初始化产生的，并不能跟着local变化而响应变化，关于这一点，我是放在了computed里面解决的

<template>
	<div class="ilst">
    	 <div
            v-for="item in list"
            :key="item">
           {{item}}
   		 </div>
    </div>
</template>
<script setup lang="ts">
import { useI18n } from 'vue-i18n'
import { ref, computed } from 'vue'
const { t } = useI18n()
// 使用ref定义之后再改语言无效
//const list = ref([
//  t('c100018'),
// t('c100019'),
// t('c100020'),
// t('c100021'),
// t('c100020'),
])
// 采用computed可解决
const list = computed(() => [
  t('c100018'),
  t('c100019'),
  t('c100020'),
  t('c100021'),
  t('c100020'),
])

</script>

当然啦解决方法不止这一种，还可以使用watch等，自己去找资料看看吧~

总结

按照目前的生态来看，做国际化项目还是比较多资料来参考的，ui框架用的是vant,这也可以通过设置locale来改变组件的语言。

import { Locale } from 'vant'
import enUS from 'vant/es/locale/lang/en-US'
Locale.use('en-US', enUS)

业务代码使用vue-i18n也很简单，是个不错的选择

到此这篇关于vue3实现国际化的过程与遇到问题的文章就介绍到这了,更多相关vue3实现国际化内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vue项目国际化vue-i18n的安装使用教程

    前言 项目需要支持多语言,我们需要提取出项目中使用的静态文本,使用语言包进行管理, 当切换语言设置的时候,可以自动切换整个项目的文字显示. 发现Vue项目中有对应的组件 vue-i18n ,而且对项目的代码修改不大,于是就使用了这个组件去修改项目中的代码.下面话不多说了,来一起看看详细的介绍吧. 安装 // script 引入 <script src="https://unpkg.com/vue/dist/vue.js"></script> <script

  • vue使用i18n实现国际化的方法详解

    vue使用i18n实现国际化的方法详解

    一.前言 在4k广告机中需要实现多语言切换,这时候接触到国际化,前端框架无数,其中几种热门的框架都有相匹配的国际化插件工具.比如: vue + vue-i18n angular + angular-translate react + react-intl jquery + jquery.i18n.property 在4K广告机项目中使用的前端框架为Vue,故而我们将使用vue-i18n这个插件进行国际化功能的实现. 二.最终实现效果 三.国际化的实现 1.首先在自己的项目中安装 vue-i18n

  • vue.js国际化 vue-i18n插件的使用详解

    安装方法 1.使用CDN直接引用 <script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/vue-i18n/dist/vue-i18n.js"></script> 2.NPM $ npm install vue-i18n 3.Yarn $ yarn add vue-i18n 使用方法 在这里只介绍v

  • vue 国际化 vue-i18n 双语言 语言包

    1.安装vue-i18n 2.在main.js里面引用 import VueI18n from 'vue-i18n' Vue.use(VueI18n) 3.实例化i18n,并配置默认的语言模式,以及对应的文件(也是在main.js里使用) 如下.cn 中文包对应的是cn.js en 对应的是英文 en.js 包 const i18n = new VueI18n({ //定义默认语言 locale: 'cn', messages:{ 'cn': require('./common/lang/cn'

  • Vue下的国际化处理方法

    1:首先安装 Vue-i8n npm install vue-i18n --save 注:-save-dev是指将包信息添加到devDependencies,表示你开发时依赖的包裹. -save是指将包信息添加到dependencies,表示你发布时依赖的包裹. 2:在main.js中配置信息 import VueI18n from 'vue-i18n' import {getCookie} from './common/cookie' //引入一个js文件,使用引入的函数getCookie,根

  • vue使用vue-i18n实现国际化的实现代码

    需求 公司项目需要国际化,点击按钮切换中文/英文 1.安装 npm install vue-i18n --save 2.注入 vue 实例中,项目中实现调用 api 和 模板语法 import VueI18n from 'vue-i18n' Vue.use(VueI18n) ; const i18n = new VueI18n({ locale: 'zh-CN', // 语言标识, 通过切换locale的值来实现语言切换,this.$i18n.locale messages: { 'zh-CN'

  • 利用Vite2和Vue3实现网站国际化的全过程

    目录 前言 安装vue-i18n 配置Locales 实现 getLangs.js 创建 i18n 实例 模板中使用 语言切换 关于切换后需要刷新后才生效 切换语言触发其他组件更新 总结 前言 最近有人在吐槽项目使用 Vue3 之后,出现一堆问题,填坑困难,甚至是开发中才发现某些第三方库没有推出 Vue3 的版本,因此大发吐槽,强烈建议不使用 Vue3. 做好技术预研和兼容性调查是开发前的工作之一,特别是对于新技术或者大版本的更新,除非你有十个胆,否则不要在预研不充分的情况下,在正式项目中使用.

  • vue3实现国际化的过程与遇到的问题详解

    目录 前言 安装引入 使用 遇到的问题 总结 前言 开发了一个国际化的项目,技术栈是vue3 + TS + vite + vant + pinia, 需要设置多语言,采用的是vue-i18n这一个国际化插件,貌似只看到英文文档,而且网上找的其他教程大部分是针对vue2的,对应vue3的比较少,所以自己整理了一下 安装引入 npm install vue-i18n 在src下新建locals文件夹,包含index.js,en.js,zh.js(只做中英文切换) // zh.js export de

  • Vue3响应式方案及ref reactive的区别详解

    目录 一.前言 二.新的方案 1. 缘由 2. Proxy 和 Reflect 1) Proxy 2) Reflect 3. reactive 1) createReactiveObject() 函数 2) mutableHandlers() 函数 -> 对象类型的 handlers 3) mutableInstrumentations() 函数 -> Map Set等类型的 handlers 4. ref 1) createRef() 2) toReactive() 3)proxyRefs(

  • vue3响应式Object代理对象的读取示例详解

    vue3响应式Object代理对象的读取示例详解

    目录 正文 读取属性 xx in obj for ... in 正文 从这一章开始,作者将更新深入的讲解响应式,尤其是vue3响应式的具体的实现.其实在前面一章,如果你仔细阅读,你是可以实现一个简单的响应式函数的,类似于@vue/reactive,当然那只是个demo,是个玩具,我能不能在生产环境上去使用的,它差了太多功能和边界条件. 现在,我们才是真正的深入@vue/reactive. 在vue中,obj.a是一个读取操作,但是仔细想来,读取这个操作很宽泛. obj.a // 访问一个属性 '

  • vue3.2自定义弹窗组件结合函数式调用示例详解

    vue3.2自定义弹窗组件结合函数式调用示例详解

    目录 前言 手写弹窗组件 组件调用 函数式调用 如何使用 含样式完整源码 效果图 前言 涉及的vue3知识点/API,createApp defineProps defineEmits <script setup> v-model <script setup> 就是 setup 语法糖 defineProps 和 props 用法差不多 defineEmits 声明可向其父组件触发的事件 手写弹窗组件 很简单的弹窗组件,支持设置标题 <script setup> def

  • Vue3从0搭建Vite打包组件库使用详解

    目录 打包配置 声明文件 打包配置 本篇文章将介绍如何使用 vite 打包我们的组件库,同时告诉大家如何使用插件让打包后的文件自动生成声明文件(*.d.ts) vite 专门提供了库模式的打包方式,配置其实非常简单,首先全局安装 vite 以及@vitejs/plugin-vue pnpm add vite @vitejs/plugin-vue -D -w 在 components 文件下新建vite.config.ts配置文件 import { defineConfig } from "vit

  • vue3自定义插件的作用场景及使用示例详解

    目录 插件的作用场景 插件的定义(注册) 插件的安装 插件的使用 插件中的Provide/inject 插件的作用场景 在vue2的插件那篇文章我们介绍过插件其实就是vue的增强功能.通常来为vue添加全局功能的.在vue3中插件的功能也是一样的,只是它们在定义上有所不同. 通过app.component()和app.directive()注册一到多个全局组件或自定义指令 通过app.provide()使一个资源可被注入进整个应用 向app.config.globalProperties中添加一

  • 安装node.js以及搭建vue项目过程中遇到的问题详解

    目录 一.node.js安装 二.如何找node.js历史版本 1.点击DOWNLOADS 2.点击页面下方 3.翻页找到历史版本 三.检查是否安装成功? 四.安装成功后需要配置环境变量: 五.环境搭建 六.项目创建 总结 一.node.js安装 进入官网 https://nodejs.org/en/download/ 直接点击下载安装!安装过程直接下一步就行: 二.如何找node.js历史版本 (https://nodejs.org/en/download/) 1.点击DOWNLOADS 2.

  • vue3.0中的watch侦听器实例详解

    vue3.0中的watch侦听器实例详解

    目录 前言 侦听器和计算属性的区别 vue3如何使用watch呢? 基本使用 监听多个响应式数据 侦听reactive定义的响应式数据 监听reactive定义的响应式数据的某一个属性 配置选项用法 总结 前言 虽然计算属性在大多数情况下更合适,但有时也需要一个自定义的侦听器.这就是为什么 Vue 通过watch选项提供了一个更通用的方法,来响应数据的变化.当需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的. 侦听器和计算属性的区别 计算属性里不可以做异步操作,侦听器可以做异步操作

  • PHP中国际化的字符串排序和比较对象详解

    目录 前言 排序 比较 属性设置 排序信息 错误信息 排序规则强度 总结 前言 在 PHP 中,国际化的功能非常丰富,包括很多我们可能都不知道的东西其实都非常有用,比如说今天要介绍的这一系列的字符排序和比较的功能. 排序 正常来说,如果我们对数组中的字符进行排序,按照的是字符的 ASC2 表的顺序进行排列,如果是英文还好,但对于中文的话,排序出来的结果会是非常懵逼的. $arr = ['我','是','硬','核','项', '目', '经', '理']; sort($arr); var_dum

  • Vue3组件更新中的DOM diff算法示例详解

    Vue3组件更新中的DOM diff算法示例详解

    目录 同步头部节点 同步尾部节点 添加新的节点 删除多余节点 处理未知子序列 移动子节点 建立索引图 更新和移除旧节点 移动和挂载新节点 最长递增子序列 总结 总结 在vue的组件更新过程中,新子节点数组相对于旧子节点数组的变化,无非是通过更新.删除.添加和移动节点来完成,而核心 diff 算法,就是在已知旧子节点的 DOM 结构.vnode 和新子节点的 vnode 情况下,以较低的成本完成子节点的更新为目的,求解生成新子节点 DOM 的系列操作. 举例来说,假说我们有一个如下的列表 <ul>

随机推荐