vue3+uni-app 报错TS2591: Cannot find name ‘require’. Do you need to install type definitions for node?

公司技术栈主要是vue，移动端是uni-app。最近打算迭代移动端项目，vue3都已经更新到3.2.x，vite也更新到2.x，前期大多数bate问题都已处理优化得差不多，正好趁这个机会将原来的vue2 + webpack 升级成 vue3 + vite + typescript。

问题出现

前期项目搭建就不在这里讲了，后面整理好了单独出一篇。讲一下遇到的问题：在一次模板语法使用require引入静态图片时，报了一个错 TS2591: Cannot find name ‘require’. Do you need to install type definitions for node? Try `npm i @types/node` and then add `node` to the types field in your tsconfig.

思路一：失败

我照着报错提示的指示安装了 @types/node 模块，但发现还是有问题。后来发现少做了一步，将 “node” 添加到类型字段里面，也就是 tsconfig.json 里的 types

"types": ["@dcloudio/types", "node"]

types用于指定需要包含的模块，只有在这里列出的模块的声明文件才会被加载。
在tsconfig.json 添加了 node 字段后页面上报错消失

思路二：失败

本以为问题就这么解决了，然而启动项目后，发现控制台还有 Cannot find name ‘require’的报错提示，并且页面上也未加载出静态文件。本着 “闯关闯不动就去翻攻略” 的想法去 vue3 和 uni 的官方文档上查找了一遍，检查下是否是由于我在使用他们两者组合时缺少了某项配置，找了一圈下来没有收获。后来我想了一下vue2 用 webpack编译时有关于静态文件引用的一些配置，既然如此那可能这个问题的答案就应该是 Vite里了。

思路三：成功

找了一圈 Vite 的文档，果然问题的根源在这里

方法优化

按照官方的推荐方案，简单的封装了一个静态文件引入的方法

/**
 * vite 解决 require("文件地址") 引入静态文件报错问题
 * 
 * @param staticPath 静态文件地址
 * @returns 
 */
export function useStaticUrl(staticPath: string): string {
  return new URL(`${staticPath}`, import.meta.url).href
}

页面上使用如图

这里是封装的一个单文件组件，使用的是 setup 语法，有关 vue3.0 的单文件组件语法我在 浅谈 vue 3.2 单文件组件和setup 这篇博文里有简单的介绍。

至此项目正常启动，静态文件引入问题解决。