vue3+vite+ts 配置@时vscode报找不到__dirname的问题

不会水的Yu

已于 2022-08-22 10:18:53 修改

阅读量4.3k

点赞数 10

于 2022-08-17 09:52:10 首次发布

本文链接：https://blog.csdn.net/yuhaiyang11/article/details/126379428

版权

原因：path 模块是 node.js 的内置模块，而 node.js 默认不支持 ts 文件的

解决：安装 @type/node 依赖包 npm install @types/node --save-dev

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

不会水的Yu

关注关注

10
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
vue3+vite+ts 配置@时vscode报找不到__dirname的问题

vue3+vite+ts 配置@时vscode报找不到__dirname的问题
复制链接

扫一扫

cannot find name ‘__dirname‘.ts

qubes的专栏

10-12

1188

environment vite vue3 error @vite.config.ts export default defineConfig({ plugins: [vue()], resolve: { alias: { // error: cannot find name '__dirname'.ts '@/': path.resolve(__dirname, 'src/') } }, }) solution install @types/no

vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化

05-12

vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+...

1 条评论您还未登录，请先登录后发表或查看评论

TS，找不到名称“__dirname”。ts(2304)

热门推荐

CSDN for recording problems

02-21

1万+

解决方案： npm install --save-dev @types/node

Vue3+TypeScript项目报错: 找不到名称“require”。是否需要为节点安装类型定义?

weixin_41012767的博客

10-25

9162

友情提示：如果你的项目用的是Vite，即框架是 Vue3+TypeScript+Vite，那么require是不能被使用的，vite中并没有require这种静态资源加载方法，因此如果是想动态的加载静态资源，应该到vite的官网上去查找vite如何引入静态资源。写上后代码波浪线报错，报错提示：找不到名称 “require”。按照提示在命令行工具中执行安装@type/node后波浪线依然存在，没有解决问题，后经过排查发现需要在ts的配置文件tsconfig.json中加上type类型，解决方式如下。

node esm模块没有__dirname，运行pnpm run dev报错 __dirname is not defined in ES module scope

kjl536566的博客

06-15

113

【代码】 node esm模块没有__dirname，运行pnpm run dev报错 __dirname is not defined in ES module scope。

vite项目中使用@代表根路径

黎小小的博客

08-08

1881

解决：在 tsconfig.json的compilerOptions下加上 baseUrl 和 paths 即可。找不到模块“path”或其相应的类型声明。

typescript报错Cannot find name ‘__dirname‘

Zhang's Blog

05-11

3106

vite.config.ts中报错 Cannot find name ‘__dirname’ 解决方案将 “node” 添加到 tsconfig.json 文件中 compilerOptions.types { "compilerOptions": { ... "types": [ "node" ] ... } } 安装@types/node npm install @types/node --save-dev ...

ts+ vscode找不到dirname

weixin_45121138的博客

12-13

438

npm install --save-dev @types/node

vite.config.js 无法使用__dirname的解决方法

知秋

01-09

2292

_dirname是commonjs规范的内置变量。如果使用了esm是不会自动注入这个变量的。在commonjs中，注入了__dirname__filenamemoduleexportsrequire五个内置变量用于实现导入导出的能力。而在esm中实现方式是不一样的。在esm中，显然模块的导入导出使用，自然不会再用，同理__dirname__filename也有对应的写法。

vue添加Electron在渲染进程调用ipc报错：__dirname is not defined

我是死宅萝莉控的博客

08-21

1万+

错误详情使用vue创建项目并添加vue-cli-plugin-electron-builder插件后在渲染进程中调用ipc与主进程通讯报错：__dirname is not defined 错误原因 As of v2.0 of VCPEB, Electron nodeIntegration is disabled by default. This blocks all node APIs such as require. This reduces security risks, and is a rec

vue3+vite2+ts+vant3 项目demo

04-16

此项目按照大佬文章一步步学习搭建 https://juejin.cn/post/7036745610954801166?share_token=5dd94aae-bed2-4733-93ac-306118376443；感谢大佬

vue3.x+vite+ts+vue-router@4.x 路由使用demo

07-24

在这个"vue3.x+vite+ts+vue-router@4.x 路由使用demo"中，我们可以学习到以下关键知识点： 1. **Vue3 Composition API**：Vue3 引入了Composition API，允许开发者将逻辑组件化，提高了代码的复用性和组织性。在...

vue3+ts+vite+router+vuex+api请求封装

12-29

Vue3+TS+Vite+Router+Vuex+API请求封装是现代前端开发中的一个典型组合，用于构建高效、可维护的后台管理系统。这个脚手架提供了完整的开发环境配置和基础架构，使得开发者能够快速搭建后台应用。下面将详细介绍这个...

Vue3+Vite4+TS 后台模板

06-08

Vue3+Vite4+TS 后台模板是一款基于最新技术栈构建的高效、现代化的前端开发框架，专为后台管理界面设计。该模板利用了Vue.js的最新版本Vue3，搭配快速构建工具Vite4，以及TypeScript的静态类型检查，提供了强大的...

ReferenceError: __dirname is not defined

每文的博客

07-19

4701

__dirname在vite.config.js中不能直接使用

vue3 找不到模块、有关node类型的变量ts错误提示找不到，如找不到名称 “process“，

qq_15006083的博客

02-10

1万+

vue3 有些模块、有关node类型的变量ts错误提示找不到，如找不到名称 “process”， 1.1 ts 错误提示：找不到名称 “process”。是否需要为节点安装类型定义? 请尝试使用 npm i --save-dev @types/node 解决办法：如上面的方法，安装@types/node开发依赖 1.2 如果是在js中引入图片或者文件提示找不到，则需要在模块声明处声明, 如果项目自定义模块，则需要在tsconfig.json文件中设置模块路径 import musicImg from ‘@/

【vite+react 学习01】vite.config.ts配置文件中__dirname解析不到

qq_46202995的博客

03-26

780

【代码】【vite+react 学习01】vite.config.ts配置文件中__dirname解析不到。

理解vue项目webpack配置中的__dirname

前端帅小伙

12-15

8707

直接上自己执行代码的截图 __dirname是node.js的一个全局变量，用于指向当前执行脚本（dirname.js）所在的目录路径，而且是绝对路径。

Vue3+Vite+Ts配置路径别名

最新发布

qq_57319760的博客

07-16

126

虽然网上有一大堆这种文章，但是总会是零零散散的存在某些问题，在此整理一下。

vue3+vite+ts配置多页面

11-22

以下是配置多页面的Vue3 + Vite + TypeScript的示例代码： 1. 在项目根目录下创建一个`pages`文件夹，用于存放多页面的入口文件和模板文件。 2. 在`pages`文件夹下创建一个`index`文件夹，用于存放首页相关的文件。 3. 在`index`文件夹下创建一个`index.html`文件，作为首页的模板文件。 4. 在`index`文件夹下创建一个`main.ts`文件，作为首页的入口文件。 5. 在`pages`文件夹下创建一个`about`文件夹，用于存放关于页面相关的文件。 6. 在`about`文件夹下创建一个`about.html`文件，作为关于页面的模板文件。 7. 在`about`文件夹下创建一个`main.ts`文件，作为关于页面的入口文件。 8. 在`vite.config.ts`文件中配置多页面： ```typescript import { defineConfig } from 'vite'; import { resolve } from 'path'; export default defineConfig({ build: { outDir: 'dist', assetsDir: 'assets', rollupOptions: { input: { index: resolve(__dirname, 'pages/index/main.ts'), about: resolve(__dirname, 'pages/about/main.ts'), }, }, }, }); ``` 9. 在`index.html`和`about.html`文件中分别引入不同的JS文件： ```html  <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Index Page</title> </head> <body> <div id="app"></div> <script type="module" src="/index.js"></script> </body> </html>  <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>About Page</title> </head> <body> <div id="app"></div> <script type="module" src="/about.js"></script> </body> </html> ``` 10. 在`main.ts`文件中编写Vue3的代码： ```typescript import { createApp } from 'vue'; import App from './App.vue'; createApp(App).mount('#app'); ``` 11. 运行`npm run dev`启动开发服务器，访问`http://localhost:3000/index.html`和`http://localhost:3000/about.html`即可查看多页面效果。