使用vite-plugin-pages时出现Cannot find module '~pages'类型错误

步骤1：添加类型声明文件 #

在项目src目录下创建或修改vite-env.d.ts文件，加入以下内容：

/// <reference types="vite-plugin-pages/client" />

这会引入vite-plugin-pages官方提供的类型声明，让TypeScript识别~pages模块。

步骤2：配置tsconfig路径别名 #

打开项目根目录的tsconfig.json，在compilerOptions中添加paths配置，映射~pages到实际页面目录：

{
  "compilerOptions": {
    // 保留原有配置...
    "paths": {
      "~pages": ["./src/pages"]
    }
  }
}

同时确认vite.config.ts中已正确注册Pages插件：

import { defineConfig } from 'vite'
import Vue from '@vitejs/plugin-vue'
import Pages from 'vite-plugin-pages'

export default defineConfig({
  plugins: [
    Vue(),
    Pages({
      dirs: 'src/pages' // 匹配你的页面存放目录，默认就是src/pages
    })
  ]
})

步骤3：重启TypeScript服务 #

如果使用VSCode，按下Ctrl+Shift+P（Windows/Linux）或Cmd+Shift+P（Mac），输入TypeScript: Restart TS Server，重启后类型错误即可消除。

额外排查点 #

• 确认已安装vite-plugin-pages依赖，未安装则执行：npm install vite-plugin-pages --save-dev
• 检查页面目录结构是否符合插件配置规则（默认是src/pages下的.vue文件自动生成路由）

内容的提问来源于stack exchange，提问作者cyberpunk777