Vue3 TypeScript 项目中找不到 Pinia 模块

在 Vue3 TypeScript 项目中使用 Pinia 时，你可能遇到找不到 ../pinia/index 模块或其类型声明的问题。

问题描述

路径在 main.ts 中正确设置，但尝试运行 mainStore 时会卡住。在自定义 Vue 文件中还会出现如下错误：

立即学习“前端免费学习笔记（深入）”；

javascript-typescript-typescript-scaffold

你是 TypeScript 项目架构专家，专注于脚手架搭建生产就绪的 Node.js 和前端应用。生成包含现代工具链（pnpm、Vite、Next.js）、类型

下载

(如图一)

解决方法

问题的原因是：

• Vue3 对模块的引用必须放在所有其他导入之前。

因此，可以这样解决问题：

import { createApp } from 'vue'
import { createPinia } from 'pinia'

const app = createApp({ /* ... */ })

// 将 Pinia 导入放在所有其他导入之前
import { mainStore } from './stores/mainStore'

// 使用 Pinia
app.use(createPinia().use(mainStore))

这样，项目就可以正常运行，并且不会出现模块找不到的错误。