Vue3+TypeScript项目报错: 找不到名称“require”。是否需要为节点安装范例

Vue3+TypeScript项目编写代码时报错：找不到名称“require”。是否需要为节点安装范例界说?请实验使用 npm i --save-dev @types/node
。 

 描述：本日在开发项目时（项目框架为Vue3+TypeScript）需要 动态引入静态资源，也就是img标签的src属性值为动态获取，按照以往的做法直接是require引入即可，如下代码：

1. <img class="demo" :src="require(`../../../assets/image/${item.img}`)" />

复制代码

写上子女码波浪线报错，报错提示：找不到名称 “require”。是否需要为节点安装范例界说? 请实验使用 npm i --save-dev @types/node
。ts(2580)
按照提示在下令行工具中实行安装@type/node后波浪线依然存在，没有办理题目，后颠末排查发现需要在ts的设置文件tsconfig.json中加上type范例，办理方式如下
第一步：按照提示 安装@type/node，在下令行工具中输入提示中的安装下令

1. npm i --save-dev @types/node

复制代码

第二步：打开 项目根目次，找到 TypeScript的设置文件tsconfig.json，在tsconfig.json中加上type:['node'] 指定范例，代码如下：

1. {
2.   "compilerOptions": {
3.     "target": "esnext",
4.     "module": "esnext",
5.     "moduleResolution": "node",
6.     "strict": true,
7.     "jsx": "preserve",
8.     "sourceMap": true,
9.     "resolveJsonModule": true,
10.     "esModuleInterop": true,
11.     "baseUrl": ".",
12.     "types": [
13.       "vite/client",
14.       "node"
15.      ],
16.     "lib": [
17.       "esnext",
18.       "dom"
19.     ],
20.     "paths": {
21.       "/@/*": [
22.         "src/*"
23.       ],
24.     }
25.   },
26.   "include": [
27.     "src/**/*.ts",
28.     "src/**/*.d.ts",
29.     "src/**/*.tsx",
30.     "src/**/*.vue",
31.     "src/vendors/coordtransform.js"
32.     ]
33. }

复制代码

加上后require即可不再报错～
交情提示：假如你的项目用的是Vite，即框架是 Vue3+TypeScript+Vite，那么require是不能被使用的，vite中并没有require这种静态资源加载方法，因此假如是想动态的加载静态资源，应该到vite的官网上去查找vite如何引入静态资源
大概看博主的另一篇题目办理方法…博文地址如下：Vue3+TypeScript+Vite如何使用require动态引入类似于图片等静态资源

来源：https://blog.csdn.net/weixin_41012767/article/details/127507839
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！