Vue3项目接入TypeScript并使用VueUse useScroll时编译报错

核心问题定位 #

报错根源是Vue3项目中混入了Vue2的模板编译依赖，同时手动安装的部分构建工具与Vue CLI内置版本冲突，导致模板生成的TypeScript代码无法被正确解析；不加lang="ts"时，TS类型注解在JS环境中失效，引发useScroll无法正常工作。

1. 替换Vue2模板编译器为Vue3版本 #

卸载Vue2专属的vue-template-compiler，安装Vue3对应的编译工具：

npm uninstall vue-template-compiler
npm install @vue/compiler-sfc --save-dev

2. 移除冲突的手动安装依赖 #

Vue CLI已内置vue-loader和webpack，手动安装的版本会导致兼容问题，直接卸载：

npm uninstall vue-loader webpack

3. 清理依赖并重新安装 #

rm -rf node_modules package-lock.json
npm install

4. 修复useScroll的目标元素问题（可选） #

router-view本身通常不是可滚动容器，若要监听页面滚动，可直接绑定到window，或指定页面内的滚动容器：

<template>
  <!-- 监听页面滚动的话，无需绑定元素，直接用useScroll() -->
  <!-- 若要监听局部容器滚动，可定义滚动容器 -->
  <div ref="scrollWrap" style="height: 100vh; overflow-y: auto;">
    <router-view />
  </div>
</template>
<script setup lang="ts">
import { useScroll } from '@vueuse/core'
import { ref } from 'vue'

// 监听局部容器
const scrollWrap = ref<HTMLElement | null>(null)
const { x, y, isScrolling } = useScroll(scrollWrap)

// 或者直接监听window：const { x, y, isScrolling } = useScroll()

// 验证功能
console.log('滚动状态：', { x, y, isScrolling })
</script>

关键说明 #

• vue-template-compiler仅支持Vue2，Vue3必须使用@vue/compiler-sfc处理模板，这是编译报错的核心原因。
• 不加lang="ts"时，ref<HTMLElement | null>这类TS语法会被当作原生JS执行，导致useScroll无法正确识别目标元素，因此功能失效。

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