在vue3+ts中配置全局vue-i18n

自律的蜗牛

已于 2023-03-21 10:34:10 修改

阅读量1.4k

点赞数 1

文章标签： vue.js 前端 typescript

于 2023-03-21 10:05:02 首次发布

本文链接：https://blog.csdn.net/ben_grf/article/details/129682306

版权

文章讲述了如何在Vue3项目中设置国际化，使用vite和typescript。关键点在于创建i18n实例时启用`globalInjection`选项，以便全局调用`t`函数。在setup中导入i18n并使用`i18n.global.t`来获取翻译文本。

摘要由CSDN通过智能技术生成

"@types/node": "^18.15.3", "vite": "^4.1.0", "typescript": "^4.9.3", "vue": "^3.2.45"

简单编写

const i18n = createI18n({
  legacy: false,
  globalInjection: true, //全局使用$t方法
  locale: langStorage?.lang || lang,
  fallbackLocale: langStorage?.lang || lang, //  没有英文的时候默认中文语言
  messages: {
    [LangEnum.ZH]: zh,
    [LangEnum.EN]: en,
  },
})

重要的是加上 `globalInjection: true`, //全局使用$t方法

setup中调用：

import i18n from '@/i18n'
//调用
console.log('18', i18n.global.t('global.sys_set'))

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

自律的蜗牛

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

vite+vue3+ts使用i18n

weixin_59916662的博客

11-15

7114

vite+vue3+ts使用i18n

vue3 +ts+vue-i18n中英文切换

qq_42859450的博客

09-29

1271

中英文切换

参与评论您还未登录，请先登录后发表或查看评论

vite-plugin-vue-i18n:Vue I18n的快速插件

04-09

:globe_with_meridians: @ intlify / vite-plugin-vue-i18n Vue I18n的Vite插件 :handshake: 支持新项目 Intlify Project是一个开源项目，其中包括Vue I18n和i18n工具和自由软件，其持续的开发完全依靠赞助商的支持。如果您想成为赞助商，请考虑： :1st_place_medal: 金牌赞助商 :2nd_place_medal: 银牌赞助商 :3rd_place_medal: 青铜赞助商 :star: 特征 i18n资源预编译 i18n自定义块静态捆绑进口捆绑优化 :optical_disk: 安装 NPM $ npm i --save-dev @intlify/vite-plugin-vue-i18n 纱 $ yarn add -D @intlify/vite-plugin-vue-i18n :warning: 注意安装此插件后，Vue I18n只能使用Composition API，如果要使用Legacy API，则需要将compositionOnly选项设置为f

vue3项目中使用 vue-i18n国际化插件，实现多语言效果

热门推荐

一只爱吃糖的小羊

09-29

1万+

vue3中使用vue-i18n(ts中使用$t, 没有this)

Vite+Vue3使用Vue-i18n笔记

wsfufua的博客

01-25

2473

vite+Vue3接入Vue-i18n国际化的步骤以及常用的方式，如模块化，如何在setup中使用vue-i18n的翻译器$t

基于vite+vue3+pinia+element-plus+ts后台管理系统源码+项目说明.zip

04-10

- vue-i18n 语言切换版本 - webpack 技术采用 webpack + vue3.0 + Typescript + vuex - uniapp uniapp版本 uniapp +vuex +element scss ``` # 本地开发启动项目借助hbuilder工具运行浏览器启动 ``` ## 下载...

Vue3.0 + Ts 项目框架搭建五：配置 i18n

weixin_44209082的博客

05-05

1654

前言在src目录下创建 i18n文件夹，该文件下创建 index.ts，zh.ts，en.ts // index.ts 文件内容 import { createI18n } from 'vue-i18n' import ZH from './zh' import EN from './en' const message = { zh: { ...ZH }, en: { ...EN } } const getCurrentLanguage = () => {

第3讲：VUE3+ant-design-vue第3版，配置vue-i18n国际化语言支持。

DVTOP的博客

11-09

2361

此处国际化选择采用i18n，VUE3必须使用vue-i18n@next安装。 antd在 V3 版本开始，默认使用 dayjs 替换了 momentjs 库。所以在国际化时，还要同时完成antd和dayjs的国际化处理。 cd dvtop-designer npm install vue-i18n@next --save npm install dayjs --save 创建语言文件，如zh_cn.ts，类似方法创建zh_tw.ts、en_gb.ts等。 module.exports = {

Vue3 + Element Plus + i18n 国际化

Mjxiaomihu的博客

08-29

1272

Vue3 + Element Plus + i18n 国际化

vue项目中使用vue-i18n报错的解决方法

12-09

前言 Vue-i18n大家应该都不陌生，Vue-i18n安装的安装方法如下： npm install vue-i18n --save 然而最近在vue项目中使用vue-i18n的时候，居然报错了，通过查找相关的资料终于找到了解决的方法，下面话不多说了，来一起看看详细的介绍吧发现问题 iview-admin框架克隆到本地，添加路由的时候，稍不注意就会遇到以下情况： Value of key ‘xxx’ is not string! Cannot translate the value of keypath ‘xxx’. Use the value of keypath as defa

i18n的一些源码

02-21

国际化的简单实现列子，对于初学者有一些帮助。

Vue 搭配vue-i18n 实现国际化，使用$t

qq_45668489的博客

06-22

1944

vue中使用 vue-i18n 实现国际化 $t 1、安装 npm install vue-i18n 2、import import VueI18n from ‘vue-i18n’ 3、挂载 Vue.use(VueI18n) 4、创建实例复制代码 const vuei18n = new VueI18n({ locale: 'zh', messages: { 'zh': require('./static/lang/zh'), 'en': require('./st

vite+ts+vue3 知识点（全局组件，局部组件，递归组件）

微光无限的博客

12-05

913

vite+ts+vue3 知识点（全局组件，局部组件，递归组件）

Vue3+Ts项目之规范和其余配置

weixin_49884775的博客

11-07

3199

集成editorconfig配置根目录创建.editorconfig文件在vscode编辑器需要安装EditorConfig for VS Code插件 # https://editorconfig.org # 代码风格设置 root = true [*] # 表示所有文件适用 charset = utf-8 # 设置文件字符集为 utf-8 indent_style = space # 缩进风格 tabs | space indent_size = 2 # 缩进大小 end_of_line =

vue多语言：vue-i18n

sunluyi的博客

12-20

267

npm install vue-i18n //main.js引入 //VueI18n import VueI18n from 'vue-i18n' import LangEn from '@/assets/js/en.js' import LangCn from '@/assets/js/cn.js' Vue.use(VueI18n) const i18n = new VueI18n({ loc...

徒手搭建VUE3项目(三)：i18n国际化

yingmd2020的博客

09-07

470

安装包 yarn add vue-i18n 配置根目录新增language文件夹，创建index.ts、ch.js、en.js、jp.js // index.ts import { createI18n } from "vue-i18n" export default createI18n({ locale: localStorage.getItem("language") || "ch", messages: { ch: require("./ch"),

vue3加ts加element-plus使用i18n

m0_71792856的博客

12-06

1150

1.我使用的Element-Plus版本是 "element-plus": "^2.0.4"是正确的，并且文件确实存在于相应的路径下。你可以检查一下该文件是否存在以及路径是否正确。基本使用i18n.(在任意组件上使用。包，以确保使用的是最新版本，并且修复了可能存在的问题。检查包的导出：根据错误信息，这个问题可能是由于。更新依赖：你可以尝试更新相关的依赖包，特别是。注意：这里是vue3的使用方式，谨供参考。文件中引入了一个模块但找不到该模块。包没有正确地导出该模块导致的。检查文件路径：请确保引入的模块路径。