vue3+vite创建的项目require和import引入方式问题报错

最新推荐文章于 2025-03-24 15:01:43 发布
最新推荐文章于 2025-03-24 15:01:43 发布
阅读量292 收藏
点赞数 1
分类专栏： 前端编程 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_35434878/article/details/140483339
版权

删除package.json中的type:"moudle"就好了。不会因为使用require报错了。
其他的方式比如把文件改mjs cjs的太麻烦，还容易有别的问题。

Vue3 - vite 项目报错：Uncaught ReferenceError: require is not defined（解决 vue3 vite 项目无法识别 require 语法导致报错）
王二红
12-16 2万+
vue3，vite，报错解决，vue3+vite报错requireisnotdefined，vue3vite引插件不识别require，老插件必须用require怎么办，vite项目插件要求使用require引入但报错，vue3不兼容require导致第三方包插件无法使用，vue3vite中使用require报错怎么办，解决Vite+vue3使用第三方依赖报错“requireisnotdefined”问题，vite项目require语法兼容问题解决requireisnotdefine
Vue3 - Vite 使用 vite-plugin-require-transform 插件运行或打包时出现报错，vue3 + vite 项目执行 build 打包时出现各种问题错误（保证完美解决）
王二红
01-01 7051
vue3，vite，vite-plugin-require-transform，打包报错，运行报错，npmrunbuild出现一堆报错，执行打包命令后出现报错怎么办，vue3+vite使用vite-plugin-require-transform插件build打包时报错如何解决，vue3项目中运行打包出现了很多警告提示报错，vue3使用阿里云ali-oss插件sdk导致打包报错解决方法，vue引入ali-oss阿里云oss的sdk运行build打包时报错，vite打包失败，import*as_vi
vue3+ts+vite 引入静态资源require报错 ——解决方案
陈福国的博客
07-31 2459
vue3中报错，导入reqire静态图片资源的时候，显示require不存在发现是 在vite中不能使用require引入图片资源，因为这里的require是webpack提供的一种加载能力，由于我们使用的是Vite，因此这里必须转用 Vite提供的静态资源载入Vite中静态资源处理官方示例简单的说 new URL 一共接收两个参数，第一个参数即图片的路径，这里就是对应require中的值，第二个参数是vite的一个全局变量，可以理解成直接写死了 import.meta.url。
Vue3+vite项目 使用require 解决 ReferenceError: require is not defined 报错问题
最新发布
蓝胖子的博客
03-24 1668
Vue3+vite项目 使用require 解决 ReferenceError: require is not defined 报错问题
Vue3 + vite + Ts require报错问题
hd07220的博客
11-05 2723
【代码】Vue3 + vite + Ts require报错问题。
vue3中报错ReferenceError: require is not defined
qq_46131497的博客
08-14 3945
然后再要使用的时候，输入你引入的名字(imgName)通过import引入图片，图片名字随便起。
Vue3项目require引入css文件报错：require is not defined
acheding的博客
11-12 4472
用 import 代替require，如果是在 if 语句里动态引入，别忘了给 css 路径加括号。
Vue3 +Vite使用require报错
qq_44741577的博客
02-04 1191
原本我们在Vue2时代，可以使用require导入静态资源，如下所示但在Vue3中的Vite没有require方法定义的使用，说白了就是不使用require方法进行资源的导入，而是使用新的方法。详情请看官网。
搭建vue3+vite+pinia项目步骤
小破孩的博客
07-04 1739
搭建 vue3+vite+pinia 项目超详细步骤
vue3+vite+js+elementPlus项目搭建
weixin_74883980的博客
11-24 1203
3、在 src 目录下创建 router 文件夹，并创建 index.js 文件这里创建的是我们的路由配置文件，我们可以将路由全部写在里面，因为有些项目可能页面会很多，所以建议创建不同的文件夹来分块，在这个文件里面也可以进行路由守卫和拦截器的书写。2、在 src 目录下创建 views 文件夹，并创建 home.vue 文件，用来存放我们的vue页面,想写多少写多少。运行成功后即可看到访问地址为：http://localhost:3000 ，通过地址可以看到 Vue 项目页面。vite项目结构大致如下啊。
Vue3+vite+TypeScript+Vant项目搭建
VnOcean的博客
09-01 1097
本篇讲述基于NodeJs、Vite、Vue3、Typescript搭建前端项目的详细步骤，此外还包括配置pinia（store）、router、跨域代理以及引入vant库的主要步骤。
vue3+ts+vite 引入静态资源require报错
小菜张的博客
11-28 7877
vue3+ts+vite 引入静态资源require报错
记错vue3+ts require 报错
banzhuanren1的博客
12-17 2693
事先声明 ，可能是版本不一样，所以解决办法不一样，报错的原因是Pack.json 文件中type值不同，解决办法有两种。在main.js 中使用require 报错 ‘require’ is not defined。方法二：type 为commonjs时 ，使用require 引入。方法一：type 为moudle 时 ，使用import 引入。pack.json 文件。pack.json 文件。
vue3+vite :src 用require引入绝度路径报错
cccdf_jjj的博客
06-23 3673
vue3+vite :src 用require引入绝度路径报错
【vue项目开发遇到的问题】在vue3中引入图片报错 Uncaught (in promise) ReferenceError: require is not defined
m0_69892739的博客
12-25 7842
因为require是webpack提供的一种加载能力，但是如果项目是用vite搭建的,就需要使用new URL(url, import.meta.url).href的格式引入图片。如下图所示：直接import引用该图片路径。
ts + vue3 + cli使用require报错
qq_41910359的博客
06-05 1319
ESLint: Require statement not part of import statement.(@typescript-eslint/no-var-requires)
Vue3 + Element-plus 报错 require is not defined 处理问题
qq_38828542的博客
04-30 1050
记：同样可以解决 element-plus/es/locale/lang/zh-cn 引入报错问题。中修改配置，没有就新建。
vue3 报错 require is not defined
w710537643的博客
03-21 5060
【代码】vue3 报错 require is not defined。
vue3+vite不能使用require引入包的问题
11-14
Vue3 和 Vite 是现代前端开发中的两个热门技术栈。Vite 是一个高性能的前端构建工具，它采用了更轻量级的预加载策略，而 Vue3 则是 Vue 框架的最新版本，强调了组件化和 TypeScript 的支持。 当你尝试使用 `require` 或者 `import * as` 来引入外部模块时，在 Vue3 + Vite 的组合下可能会遇到一些问题。这是因为 Vite 默认配置是基于 ES 模块（`.mjs` 文件），而不是 CommonJS（`.js` 文件）。CommonJS 的 `require` 功能在 Vite 中需要额外配置才能工作。 解决这个问题通常需要做以下几步： 1. **安装 vite-plugin-commonjs**：这是用于启用 CommonJS 支持的插件，可以使用 npm 或 yarn 安装： ```bash npm install --save-dev vite-plugin-commonjs ``` 2. **在 vite.config.js 中添加插件配置**： ```javascript import { defineConfig } from &#39;vite&#39;; import commonjs from &#39;vite-plugin-commonjs&#39;; export default defineConfig({ plugins: [ commonjs(), ], }); ``` 3. 使用 `import` 替换 `require`： 而不是 `require(&#39;package&#39;)`，你应该使用 `import package from &#39;./path/to/package&#39;`。 4. 如果是在.vue 文件中使用，可以在文件顶部使用 `import.meta.glob` 或者 `<script setup>` 特性来动态导入，因为 Vue 组件默认只支持 ES 模块。 注意，虽然上述步骤能解决大部分 `require` 的问题，但在某些大型项目中，完全迁移至 ES6 模块可能是更好的解决方案。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值