0
点赞
收藏
分享

微信扫一扫

sqli-labs靶场自动化利用工具——第6关

萨科潘 2024-09-12 阅读 26

目录

1,问题

在 Vue3 项目中使用 vue-i18n v9.14.0 时,可以:

<template>
	<div>{{ t('xxx') }}</div>
</template>

<script setup lang="ts">
import { useI18n } from "vue-i18n";
const { t } = useI18n();
</script>

也可以直接使用 $t

<template>
	<div>{{ $t('xxx') }}</div>
</template>

虽然可以正常渲染,但会有 Typescript 的报错:

在这里插入图片描述

2,解决

因为 vue-i18n 在 Vue 实例上添加了该属性,比如:

<script setup lang="ts">
// getCurrentInstance 需要在组件中使用。
import { getCurrentInstance } from "vue";
const {
	appContext: {
		config: { globalProperties },
	},
} = getCurrentInstance();
console.log(globalProperties.$t);
</script>

所以根据报错信息,猜测是 globalProperties 对象上没有定义这个属性,所以报错。那就看下这个属性的类型定义:

// node_modules\@vue\runtime-core\dist\runtime-core.d.ts

export declare const getCurrentInstance: () => ComponentInternalInstance | null;

export interface ComponentInternalInstance {
    // ...
    appContext: AppContext;
}

export interface AppContext {
    // ...
    config: AppConfig;
}

export interface AppConfig {
	// ...
	globalProperties: ComponentCustomProperties & Record<string, any>;
}

// 默认为空
export interface ComponentCustomProperties {
}

解决:手动添加类型声明文件,给 ComponentCustomProperties 添加 $t 属性即可。

目录 src/vue-i18n.d.ts

/* eslint-disable */
import Vue from "vue";
declare module "@vue/runtime-core" {
	export interface ComponentCustomProperties {
		$t: (key: string, ...args: any[]) => string;
	}
}

以上。

举报

相关推荐

0 条评论