👨‍💻‍记录使用Vue3、TS、Vite开发项目过程中遇到的各种难点、API问题、BUG、及教程整理（不定时更新）

前言

目前市场上常用的两大Vue桌面端UI组件库：Element、Ant Design Vue，以及前两年新出的，字节的Arco Design、鹅厂的TDesign，这四大PC端UI组件库，内置的组件，基本能满足大部分项目所需的业务功能需求。

此篇文章在此记录整理，本人从22年初开始上手使用Vue3、TS、Vite以后，开发产品的过程中，针对项目中业务需求所遇到的各种难点、API问题、BUG、及教程整理（不定时更新）😁

正文

1、export 'hasInjectionContext' (imported as 'hasInjectionContext') was not found in 'vue-demi'，

控制台遇到这种报错，是因为Pinia 和 Vue3 版本冲突了，需要降级Pinia。

先删除pinia，npm uninstall pinia ，然后重新安装低版本，npm i pinia@2.0.36 --force。

参考：

stackoverflow.com/questions/7…

github.com/vuejs/pinia…

2、Vue3使用i18n时，如果是下面这种引入方式：

import {useI18n} from 'vue-i18n';  
const i18n = useI18n();  
const { t } = useI18n();

会报错：

SyntaxError: Must be called at the top of a 'setup' function

此时要改为以下这种引入方式，即可解决：

import i18n from '@/locale/i18n'
const { t, } = i18n.global

3、Lodash里的isArray、isObject方法，如果逻辑涉及到需要固定输出数组格式，假如入参是对象格式，那么需要包装成数组。

在写判断时，这样写会造成Bug，会把一维数组包成二维数组，因为数组也是对象。

let finalSource = [];
if (_.isEmpty(sources)) return "";
if (_.isObject(sources)) {  
    finalSource = [sources];
} else if (_.isArray(sources)) {  
    finalSource = sources;  
}

需要优化为先判断isArray。

let finalSource = [];  
if (_.isEmpty(sources)) return "";  
if (_.isArray(sources)) {  
    finalSource = sources;  
} else if (_.isObject(sources)) {  
    finalSource = [sources];  
}