【chrome扩展开发】vue-i18n使用问题及解决方案

news2024/10/2 16:21:09

记录chrome扩展开发时调用vue-i18n的一些问题和解决方法

环境

  • vue: ^3.3.4
  • vue-i18n: ^9.2.2
  • vite: ^4.4.8

错误1

Uncaught (in promise) EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'self' 'wasm-unsafe-eval' 'inline-speculation-rules' http://localhost:* http://127.0.0.1:*".

原因

  • https://vue-i18n.intlify.dev/guide/advanced/optimization.html#improve-performance-and-reduce-bundle-size-with-runtime-build-only
    在这里插入图片描述

解决方案1:
方案来源:

  • https://github.com/intlify/bundle-tools/issues/23#issuecomment-893353418
  • https://github.com/intlify/bundle-tools/tree/main/packages/vue-i18n-loader#why-do-we-need-to-require-the-configuration

这个方法虽然可以解决报错问题,但是t函数还是无法正常使用,如果只是简单的语言调用可以使用tm函数

<script setup>
import {useI18n} from 'vue-i18n'
const {tm} = useI18n()
</script>

<template>
	<div>
		{{ tm('test') }}
	</div>
</template>
// 在createI18n时,增加一个导出方法,来简单解决`t`函数不能正常用的问题
export function ts(key: string, arg: object) {
  const {tm,locale} = useI18n()
  let _text = tm(key);
  let reg;
  for(let LKey in arg){
    reg = new RegExp('\{\\s*?'+LKey+'\\s*?\}','g');
    // @ts-ignore
    _text = _text.replace(reg, arg[LKey])
  }
  return _text;
}

// 使用:ts('test', {key1: 'key1Val', key2: 'key2Val'})

解决方案2:
方案来源:

  • https://www.cnblogs.com/guangzan/p/14999292.html
  • https://vue-i18n.intlify.dev/guide/advanced/optimization.html#vite-plugin-vue-i18n

使用 vite 插件 vite-plugin-vue-i18n 处理这个问题

npm i --save-dev @intlify/vite-plugin-vue-i18n

# 包文档: https://www.npmjs.com/package/@intlify/vite-plugin-vue-i18n (停更)
# 包作者提醒:
# This plugin support until Vite 3. If you would like to use on Vite 4, please use @intlify/unplugin-vue-i18n

npm i --save-dev @intlify/unplugin-vue-i18n
# 包文档: https://www.npmjs.com/package/@intlify/unplugin-vue-i18n

vue-i18n官方文档示例:
vue-i18n官方文档示例

错误2

You are running the esm-bundler build of vue-i18n. It is recommended to configure your bundler to explicitly replace feature flag globals with boolean literals to get proper tree-shaking in the final bundle.

解决方案:

// vite.config.ts
resolve: {
  alias: {
    // ...
    'vue-i18n': 'vue-i18n/dist/vue-i18n.runtime.esm-bundler.js'
  },
},

其他相关文献:

  • 【vue-i18n踩坑】The message format compilation is not supported in this build.
  • 【VUE】vue-i18n: Uncaught SyntaxError: Not available in legacy mode
  • vue-i18n-next bundle includes new Function()
  • Interpolations in production mode does not work
  • vue3 with vue-i18n-next only works with unsafe-eval CSP header

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/836279.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

07 Ubuntu中使用poetry工具管理python环境——巨详细!!!

由于conda和ros2的环境实在太容易冲突了。我真的不敢再使用conda&#xff0c;着实是有些搞不明白这解释器之间的关系。 conda的卸载和ros2的安装暂不赘述&#xff0c;下面着重来说如何在Ubuntu中使用poetry进行包管理及遇到的问题。 1 安装poetry 由于在有写入权限的限制&am…

uniapp 返回上一页并刷新

如要刷新的是mine页面 在/pages/mine/improveInfo页面修改信息&#xff0c;点击保存后跳转到个人中心&#xff08;/pages/mine/index&#xff09;页面并刷新更新数据 点击保存按钮时执行以下代码&#xff1a; wx.switchTab({url: /pages/mine/index }) // 页面重载 let pages …

JConsole-的使用

文章目录 一、简介二、使用2.1 启动 JConsole2.2 连接到 Java 进程2.2.1 本地连接2.2.2 远程连接 2.3 监控 JVM 资源 一、简介 JConsole 是一种 Java 监控和管理控制台工具&#xff0c;可以用于监视 Java 虚拟机&#xff08;JVM&#xff09;的性能和资源利用情况。它提供了一种…

汉字姓名转拼音

import osimport pandas as pdfrom xpinyin import Pinyindownpath/Users/Kangyongqing/Downloads/ file1教师姓名转拼音.xlsxdtpd.read_excel(downpathfile1) print(dt.info()) dt[pinyin]dt[教师姓名].apply(lambda x:Pinyin().get_pinyin(x).split(-)[0].capitalize() .join…

antd select multiple模式 Dropdown onClick 失效

背景&#xff1a;当 Ant Design 的下拉菜单&#xff08;Dropdown&#xff09;在默认情况下从下方弹出&#xff0c;在某些情况下可能会因为页面空间不足而自动切换到上方弹出。这种位置变动可能导致点击事件无法触发。 复现描述&#xff1a;当输入搜索时&#xff0c;option会筛…

几乎与人类无异,机器人手通过触摸感知物体

原创 | 文 BFT机器人 人类即使在看不清物体的情况下也能够毫不费力的感知抓取物体&#xff0c;受到这一启发&#xff0c;加州大学圣迭戈分校工程师领导的研究小组开发出了一种新方法&#xff0c;使机械手能够不依赖视觉&#xff0c;仅通过触摸就能感知旋转物体。 利用他们的技…

什么是OCR?OCR技术详解

光学字符识别(Optical Character Recognition)简称为“OCR”。ORC是指对包含文本资料的图像文件进行分析识别处理&#xff0c;获取文字及版面信息的技术。 一般包括以下几个过程&#xff1a; 1.图像输入 针对不同格式的图像&#xff0c;有着不同的存储格式和压缩方式。目前&…

HTML,url,unicode编码

目录标题 HTML实体编码urlcode编码unicode编码小结基础例题高级例题 HTML实体编码 实体表示&#xff1a; 以&符号开始&#xff0c;后面跟着一个预定义的实体的名称&#xff0c;或是一个#符号以及字符的十进制数字。 例&#xff1a; <p>hello</p> <!-- 等同…

【Python】PySpark 数据计算 ⑤ ( RDD#sortBy方法 - 排序 RDD 中的元素 )

文章目录 一、RDD#sortBy 方法1、RDD#sortBy 语法简介2、RDD#sortBy 传入的函数参数分析 二、代码示例 - RDD#sortBy 示例1、需求分析2、代码示例3、执行结果 一、RDD#sortBy 方法 1、RDD#sortBy 语法简介 RDD#sortBy 方法 用于 按照 指定的 键 对 RDD 中的元素进行排序 , 该方…

pp-ocr报错记录

RESER 报错&#xff1a; distutils.errors.DistutilsError: Could not find suitable distribution for Requirement.parse(‘tomli>1.0.0’) 解决办法&#xff1a; 参考&#xff1a;https://stackoverflow.com/questions/67603407/distutilserror-could-not-find-suitable…

golang函数传参——值传递理解

做了五年的go开发&#xff0c;却并没有什么成长&#xff0c;都停留在了业务层面了。一直以为golang中函数传参&#xff0c;如果传的是引用类型&#xff0c;则是以引用传递&#xff0c;造成这样的误解&#xff0c;实在也不能怪我。我们来看一个例子&#xff0c;众所周知&#xf…

享元模式 Flyweight Pattern 《游戏编程模式》学习笔记

如果我们要存储一个树一样的数据结构&#xff0c;直觉来说我们会这么写 但是实际上我们会发现&#xff0c;哪怕森林里有千千万万的树&#xff0c;它们大多数长得一模一样。 它们使用了相同的网格和纹理。 这意味着这些树的实例的大部分字段是一样的。 那么我们就可以将树共…

C语言自定义类型 — 结构体、位段、枚举、联合

前言 本期主要对通讯录三篇博客文章进行补充 通讯录文章&#xff1a;通讯录系列文章 对结构体进行详细介绍&#xff0c;其次讲解位段、枚举、联合体 文章目录 前言一、结构体1.什么是结构体2.结构声明2.1 声明格式2.2 如何声明&#xff08;代码演示&#xff09; 3.特殊声明3.1…

css word-break

上面的一行还是可以放置很多个字符的&#xff0c;但是就是换行了。 要求填充满整行&#xff0c;超过在换行 加上word-break:break-all;就行

每日汇评:由于美国就业数据强劲,黄金可能恢复下行趋势

1、美国非农就业数据公布前&#xff0c;金价试图从三周低点反弹&#xff1b; 2、美国经济数据喜忧参半&#xff0c;推动美元和美债收益率回落&#xff1b; 3、金价上行空间有限&#xff0c;因日技术面走势偏空&#xff1b; 金价又将下跌一周&#xff0c;周五有望创下六周以来…

浅谈小区电动汽车充电桩管理系统设计及应用

安科瑞 华楠 摘要&#xff1a;提出了针对数量众的充电桩计算充电负荷时所需需要系数的一种替代方法&#xff0c;阐述了二者适用背景的相似性&#xff0c;并针对其可行性进行了相关论述。数發众的新能源汽车在相对集中的时间充电&#xff08;尤其是与居民用电高峰重的惰况下&…

测试人员简单使用Jenkins

一、测试人员使用jenkins干什么&#xff1f; 部署测试环境 二、相关配置说明 一般由开发人员进行具体配置 1.Repository URL&#xff1a;填写git地址 2.填写开发分支&#xff0c;测试人员可通过相应分支进行测试环境的构建部署 当多个版本并行时&#xff0c;开发人员可以通过…

devops-发布vue前端项目

回到目录 将使用jenkinsk8s发布前端项目 1 环境准备 node环境 在部署jenkins的服务器上搭建node环境 node版本 # 1.拉取 https://nodejs.org/download/release/v20.4.0/node-v20.4.0-linux-x64.tar.gz# 2.解压到/usr/local目录下 sudo tar xf v20.4.0.tar.gz -C /usr/loc…

唐刘:TiDB 研发工程实践及 TiDB 人才观丨CCF 中国数据库暑期学校

在刚刚结束的 CCF 中国数据库暑期学校上&#xff0c; PingCAP 的研发副总裁唐刘分享了在 TiDB 研发过程中的工程实践经验和人才培养方法。目前&#xff0c;TiDB 已广泛应用于各行各业&#xff0c;有着庞大的用户基数&#xff0c;面临多样化的数据处理需求。PingCAP 通过开源、敏…

Datax 数据同步-使用总结(一)

1&#xff0c;实时同步&#xff1f; datax 通常做离线数据同步使用。 目前能想到的方案 利用 linux 的定时任务时间戳的方式做增量同步。 2&#xff0c;同步速度快不快&#xff1f; 单表同步速度还是挺快的 但是如果遇到复杂的 sql 查询&#xff0c;其同步效率&#xff0c…