vue中的js文件里使用i18n

最新推荐文章于 2024-01-31 13:13:54 发布

heidou_3

最新推荐文章于 2024-01-31 13:13:54 发布

阅读量406

点赞数 1

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/heidou_3/article/details/130365620

版权

在Vue.js应用中遇到`this.$tisnotafunction`的错误，通常是因为在非Vue实例上下文中调用了翻译方法。解决方法是在main.js中正确导入和使用i18n插件，确保`this`指向Vue实例。同时，检查是否正确配置和引入了翻译资源。

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

会报this.$t is not a function

解决：我在main.js文件里写入window

在js文件里直接

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

heidou_3

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue中的js文件里使用i18n

i18n在js文件中报$t is not a function
复制链接

扫一扫

Vue多语言vue-il8n的使用

熙冰

03-18

2108

安装配置使用页面中使用安装 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' impo...

Vue或UniApp 前端语言国际化 i18n lang.js包

06-23

使用方式与Vue.js基本一致，只需确保在uni-app项目中正确引入和配置`vue-i18n`。 `en.js`和`zh.js`是特定语言的翻译文件，它们分别包含了英文和中文的语言资源。通常，这些文件会按照以下格式组织： ```javascript...

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

vue3使用 i18n以及在JS中如何使用？

honeydragon's博客

11-20

1058

【代码】vue3使用 i18n以及在JS中如何使用？

Vue.js项目中使用vue-i18n

前端程序猿的博客

10-10

803

当切换语言时，vue-i18n会自动根据当前语言显示翻译内容。例如，在上述示例中，初始语言为英文，因此页面上展示的是"Hello!“，当切换语言为中文时，页面上的文本会自动更新为"你好！在上述示例中，首先在main.js中引入vue-i18n，并定义了两种语言的翻译内容。然后，在创建Vue实例时，将VueI18n实例作为插件注册，并传入语言包。这只是一个简单的vue-i18n案例，你可以根据具体项目需求进行更复杂的语言包配置和翻译使用。方法进行翻译，在mounted钩子函数中可以通过。

vue-i18n插件报错：Uncaught TypeError: _ctx.$t is not a function

热门推荐

任磊

03-22

1万+

在vite脚手架项目当中，使用vue-i18n插件进行国际化多语言时，爆出 Uncaught TypeError: _ctx.$t is not a function 首先查看vue-i18n的版本号：9.2.0-beta.32 修复这个问题添加globalInjection: true到i18n插件当中 const i18n = createI18n({ legacy: false, locale: "ja", globalInjection: true, me..

VUE项目框架在JS文件中使用i18n做国际化

weixin_44190511的博客

01-10

4295

VUE项目框架使用i18n做国际化

js 关于this引起的错误

iiiiiiiiiiii9的专栏

03-24

696

_savePayment: function () { var _this = this; //var params = $("#payment_partial input").serializeArray(); window.oscObserver.beforeUpdatePaymentMethod();

vue-cli-plugin-i18n:Vue CLI插件可将vue-i18n添加到您的Vue项目

05-11

使用vue-i18n-loader的单个文件组件中的区域设置消息区域设置消息丢失和未使用的报告（实验性）环境变量 :rocket: 入门如果yon没有使用Vue CLI创建的项目： vue create my-vue-app 将插件安装到您的项目中： ...

使用 vue-i18n 切换中英文效果

08-27

在项目入口文件（如 `main.js`）中引入 Vue 和 Vue-i18n，并启用该插件： ```javascript import Vue from 'vue' import VueI18n from 'vue-i18n' Vue.use(VueI18n) ``` 接下来，你需要准备本地化的翻译信息。这些...

i18n-replace：vue-i18n提取项目文件内中文转换

03-03

在国际化(i18n)方面，Vue-i18n是Vue.js生态中的一个关键库，它使得应用程序能够根据用户的选择显示不同语言的内容。"i18n-replace"工具就是针对Vue-i18n的一个辅助工具，专门用于从项目文件中提取中文文本以便进行...

vue-i18n提取-使用静态分析管理vue-i18n本地化。报告丢失和未使用的i18n条目。-Vue.js开发

05-27

vue-i18n-extract vue-i18n-extract用于与使用vue-i18n的Vue.js项目一起使用。运行vue-18n-extract时，将分析您的Vue.js源代码。vue-i18n-extract vue-i18n-extract是为与使用vue-i18n的Vue.js项目一起使用而构建的...

vue组件中的国际化i18n在js中使用时未生效的处理

芋头CF的专栏

11-01

7693

转自我的简书：https://www.jianshu.com/p/9e018002976e 在国际化i18n组件使用中，我们之前的用法有点错误，我总结一下哈：在vue组件的中使用 <template> <div> <div class="page-header-title">{{$t("m.RegisterTitle[1]")}}&lt...

Vue i18n多语言设置(可在js内引用)

Javon_huang的博客

12-30

4773

1.安装依赖包npminstalli18n--save 2.创建一个单独i18n.js,用于创建一个i18n对象，后续整个项目统一使用该对象。 import Vue from 'vue' import VueI18n from 'vue-i18n' Vue.use(VueI18n) let lang = localStorage.lang?localStorage.lang:'zh...

【已解决】TypeError: _ctx.$t is not a function when using $t in child component

m0_51749295的博客

11-19

8854

关于最近我在练习一个vue的小demo使用i18n的时候碰到的问题，TypeError: _ctx.$t is not a function when using $t in child component

Element Plus 使用el-dialog嵌套 el-tabs出现多语言报错问题 $t

最新发布

qq_46058838的博客

01-31

318

错误信息 TypeError: _ctx.$t is not a functionat。但是当 legacy: false,时会出现多语言下拉框出不来。在多语言 locale文件夹下的 index.js文件。添加 legacy: false,具体情况具体分析...

Vue3.x 报 Uncaught TypeErrorObject(...) is not a function( Vue3对象不是函数解决思路)

m0_67392661的博客

03-02

2609

今天在vue3的练习时候发现我写的路由总是浏览器报错，仔细校验文档发现并没有错误啊，可总是报Uncaught TypeError:Object(…) is not a function的错误，看下图：网上针对这个错误的解释都是重名啊、大小写错误啥的。很显然对于我这种老鸟（菜鸡）是不可能犯这种错误的。经过一顿折腾竟然是版本问题。。。。。。。。。。。我查看了路由的版本号，3.5.1并不是最新的，理论上讲应该问题不大，但是还是抱着试一试的心态把vue相关的都升级了一遍，再次编译，竟然没有这个问题了。真不知道这

【Vue】使用 vue-i18n 报错问题解决（一）

yqyn6的博客

05-04

5857

解决报错 Uncaught (in promise) SyntaxError: Not available in legacy mode (at message-compiler.esm-bundler.js:54:1) at createCompileError (message-compiler.esm-bundler.js:54:1) at createI18nError (vue-i18n.esm-bundler.js💯1)

TypeError: _ctx.dayjs is not a function

竹杖芒鞋轻胜马，谁怕？一蓑烟雨任平生

06-06

3130

andt 日期选择器禁用小时分钟秒，报错_ctx.dayjs is not a function

vue+element-ui使用vue-i18n进行国际化 js文件单独使用i18n

m0_68792354的博客

05-30

2124

/引入自定义语言配置 import zh from './zh';//语言包定义的位置，前文写在同一文件夹下，可自行修改位置 import en from './en';//引入UI框架语言配置---elementui import locale from 'element-ui/lib/locale';

vue中的js文件如何使用i18n 国际化

06-07

在Vue中使用i18n国际化，可以在vue文件中使用`$t`方法获取文本信息，也可以在js文件中使用`$t`方法获取文本信息。对于js文件的使用方式，可以参考下面的步骤： 1. 在Vue实例中引入和初始化i18n插件，并在Vue实例中传入i18n实例。具体代码如下： ```javascript import Vue from 'vue' import VueI18n from 'vue-i18n' import messages from './lang' Vue.use(VueI18n) const i18n = new VueI18n({ locale: 'zh-CN', messages }) new Vue({ i18n, render: h => h(App) }) ``` 其中，`messages`是一个对象，包含了所有语言的key-value对。 2. 在js文件中，通过`Vue.prototype.$t`方法获取对应语言的文本信息。具体代码如下： ```javascript import Vue from 'vue' Vue.prototype.$t('message.hello') ``` 其中，`message.hello`是对应语言的key值，可以根据需要进行修改。如果需要获取带有变量的文本信息，则可以使用`$t`方法的第二个参数，如下所示： ```javascript Vue.prototype.$t('message.welcome', { name: 'John' }) ``` 其中，`message.welcome`是对应语言的key值，`{ name: 'John' }`是一个对象，包含了需要替换的变量信息，可以在对应语言的value值中使用`{变量名}`进行替换。例如： ```javascript const messages = { 'zh-CN': { welcome: '欢迎{name}使用本系统' }, 'en-US': { welcome: 'Welcome {name} to use this system' } } ``` 以上就是在Vue中使用i18n国际化的基本流程和js文件中使用`$t`方法的示例代码。