【Vue】使用 vue-i18n 报错问题解决(一)

这篇具有很好参考价值的文章主要介绍了【Vue】使用 vue-i18n 报错问题解决(一)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1. 出现问题背景

初始化好前端项目后,准备使用vue中文插件i18n,代码里加载好插件,重启项目发现页面无法跳转至首页,呈空白
【Vue】使用 vue-i18n 报错问题解决(一),VUE系列,vue.js,javascript,前端

2. 问题排查

a.右击打开检查
【Vue】使用 vue-i18n 报错问题解决(一),VUE系列,vue.js,javascript,前端
b.查看console

【Vue】使用 vue-i18n 报错问题解决(一),VUE系列,vue.js,javascript,前端
c.报错信息
【Vue】使用 vue-i18n 报错问题解决(一),VUE系列,vue.js,javascript,前端
具体报错内容:

ssage-compiler.esm-bundler.js:54 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)
at useI18n (vue-i18n.esm-bundler.js:2229:1)
at setup (Index.vue:21:1)
at callWithErrorHandling (runtime-core.esm-bundler.js:173:1)
at setupStatefulComponent (runtime-core.esm-bundler.js:7265:1)
at setupComponent (runtime-core.esm-bundler.js:7220:1)
at mountComponent (runtime-core.esm-bundler.js:5542:1)
at processComponent (runtime-core.esm-bundler.js:5517:1)
at patch (runtime-core.esm-bundler.js:5119:1)

3. 解决方案

搜索到解决方案,暂时解决页面跳转问题(https://github.com/intlify/vue-i18n-next/issues/1193)
在引入vue-i18n 处,添加 legacy: false,

const i18n = createI18n({
  legacy: false,
  ...

【Vue】使用 vue-i18n 报错问题解决(一),VUE系列,vue.js,javascript,前端
项目重启后,解决页面空白问题:

【Vue】使用 vue-i18n 报错问题解决(一),VUE系列,vue.js,javascript,前端文章来源地址https://www.toymoban.com/news/detail-563835.html

到了这里,关于【Vue】使用 vue-i18n 报错问题解决(一)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vue3中使用vue-i18n实现多语言切换

    1、安装插件【注意Vue3使用9版本,Vue2用的是8版本】 2、在src在创建lang文件夹,并创建index.js、i18n.js、和 翻译的内容文件  3、写入翻译内容,举个例子:英文(en)、中文简体(zhCN)、中文繁体(zhTN) 3、编写index.js文件,导出所有翻译内容 4、编写i18n.js文件 5、在main.js中挂载

    2024年02月06日
    浏览(41)
  • Vue3中,国际化插件vue-i18n使用记录,配合VSCode自动化翻译插件i18n Ally

    说明文档: vue-i18n 版本说明: vue: 3.0.0+ vue-i18n: 9.x版 src 目录下新建目录 lang ,存放 i18n 的配置。 新建目录名称: lang (语言)、 locales (语系设定)、 i18n ,这些名称都可被VSCode图标插件( vscode-icons )检测到并美化。 lang 目录下,新建 index.js 文件,引入 vue-i18n 。 语言的配置信

    2024年02月12日
    浏览(30)
  • vue2+element-ui使用vue-i18n进行国际化的多语言/国际化

    注意:vue2.0要用8版本的,使用9版本的会报错 在src目录下,创建新的文件夹,命名为i18n zh.js en.js index.js main.js 使用方式一 效果图 使用方式二 效果图 使用方式三,在 效果图 ` 注意:这种方式存在更新this.$i18n.locale的值时无法自动切换的问题,需要刷新页面才能切换语言。解

    2024年02月07日
    浏览(56)
  • vue-i18n国际化多语言与多套UI组件库使用(Element Plus、Ant Design Vue、Naive UI)

    demo源码:Vue3 UI Lang 因调研需要,需在同一个项目中集成好几种UI组件库的多语言实现,查看各种组件库的表现情况,以便选定组件库。 注意:这只在调研过程中会如此,实际开发项目中极少存在一个项目中集成多个UI组件库的情况。 本demo实际试验阿拉伯语、法语、葡萄牙语

    2024年02月08日
    浏览(41)
  • Vue3+Vue-i18n+I18N ALLY+VSCODE 自动翻译多国语言

    ps: 效果图放前面,符合的往下看,不符合的出门右转,希望多多点赞评论支持。 三种语言模式,分别是中文、英文、日文 批量翻译 最后的结果 配置vue-i18n 1、下载安装 vue-i18n ,@9以上的版本。 2、创建对应文件夹 3、对应文件夹中代码如下 helper.ts setupI18n.ts useLocale.ts 4、创建全

    2024年02月09日
    浏览(47)
  • vue-i18n 实现国际化,支持切换不同语言

    需求:后台管理系统,可以实现语言切换 实现过程:用的i18n来实现的语言切换,网上能看到好多模板,根据自己的需求,修改一下即可使用,大概都是差不多的,因为涉及到后端,所以要跟后端协商一致决定去写,我的设计思路是跟着后端设计更改的,如下: 1.语言是后端接

    2024年02月12日
    浏览(32)
  • electron+vue3全家桶+vite项目搭建【六】集成vue-i18n 国际化

    已发现 9.2.2版本的vue-i18n 如果使用cnpm安装,打包会报错,使用npm或者pnpm安装依赖没有问题 如果需要多语言支持,那么最好在项目搭建之初我们就集成好国际化 vue i18n官网 demo项目地址 关于多窗口国际化不同步更新状态的问题解决方案 1.我们现在src下面创建locals目录,里面创

    2023年04月12日
    浏览(64)
  • 扩展 jQurey.i18n.properties 的能力来向 vue-i18n 靠齐

    jQuery.i18n.properties 是 jQuery 老项目的国际化框架,其实国际化方案本质上都大同小异,都是需要用翻译函数包裹词条,然后根据词条文件来进行翻译 就是使用上与其他框架不太一样而已 但由于我们已经基于 vue 框架实现了一个国际化自动处理脚本,脚本会自动用全局函数包裹

    2024年02月03日
    浏览(27)
  • 【Vue 快速入门系列】一文透彻vue中使用axios及跨域问题的解决

    Axios(ajax i/o system),是Vue创建者主推的请求发送方式,因其简单的配置与良好的性能被前端爱好者所喜爱。众所周知,在进行网页设计时经常需要从后端拿数据,在Web应用初期会将整个页面或者文档直接拿过来,随着Web应用的发展,人们对性能的不断提升,逐渐向无页面刷新

    2024年02月12日
    浏览(30)
  • ❤ Vue使用Eslint检测报错问题和解决

    关闭ESLint语法检测即可:具体步骤如下: 第一步我们打开setting设置: 打开左上角的file,然后点击setting 接下来进入setting以后我们来看下面操作: eol-last 在–fix命令行上的选项可以自动修复一些被这条规则反映的问题。 在非空文件中跟踪换行符是一种常见的 UNIX 习惯用法。

    2024年02月11日
    浏览(32)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包