vite3+vue3+ts 引入js报错

最新推荐文章于 2024-03-14 20:42:37 发布
最新推荐文章于 2024-03-14 20:42:37 发布
阅读量994 收藏
点赞数
文章标签： 经验分享 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_57703015/article/details/132753928
版权

vite3+vue3+ts 在引入js的时候会报这个错误

Uncaught SyntaxError: The requested module '/src/soft-algorithm-min.js' does not provide an export named 'default'

eb5ca6d984db40319fb606590f122318.png

找了很久发现是vite只支持es格式的js，而这个js是webpack打包的，使用的是umd（commonjs、amd、全局变量） ，所以就会报这个错误。

需要引入@originjs/vite-plugin-commonjs这个依赖

89e32257b4114451a73b8f9f5354226c.png 

然后在vite.config.ts引入这个依赖

803b13cd03e0428b845048e726af0b93.png

 

Miya-min
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
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+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia
vue3+vite+qiankun+monorepo框架
08-03
vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架
【学一点儿前端】vue3+vite不能使用require引入包的问题（require is not defined）
fangyuan__的博客
03-14 2152
前端有很多的工具包是commonjs的写法，只能用require引入，而vite+vue3构建的项目不能使用require，只能用import，为了能够方便地引入commonjs工具包，我们需要把这些工具包转为es module。使用 @rollup/plugin-commonjs 插件，用于将CommonJS模块转换为ES6模块的Rollup插件.2、在vite.config.ts配置中添加该插件，注意 commonjs0必须在vue()上面，否则不生效。3、随意导入commonjs工具包。
全栈-Vite3+Vue3+TS+Ant-design-vue3整合
11-07
全栈开发实战技术分享 前端:Vite3+Vue3+TS+Ant-design-vue3 后端:SpringBoot+MybatisPlus+Mysql
vue3+vite2+ts+vant3 项目demo
04-16
此项目 按照大佬文章 一步步学习搭建 https://juejin.cn/post/7036745610954801166?share_token=5dd94aae-bed2-4733-93ac-306118376443；感谢大佬
des.rar_nam_trace
09-22
节点实时位置跟踪的仿真代码，包括trace，nam
React+vite3.x实战配置
qq_36529240的博客
07-29 2219
React+vite3.x实战配置
Nuxt3遇见的坑（三）： Nuxt3 引入wow.js播放动画
weixin_43160498的博客
09-28 2829
nuxt3 引入 wow.js
我在 vue3 开发中踩的坑
我本可以容忍阳光，如果我不曾见过太阳，然而阳光已使我荒凉，成为更新的荒凉。
11-09 1030
前期准备由于 vite 在开发态是基于 ESM 进行模块化开发, 而 ESM 的浏览器兼容版本有限，如下图。esm-兼容所以，如果你打算使用 vite 作为构建工具去开发，你至少要有一个合适版本的浏览器。如果你和我一样，Chrome 版本的浏览器比较低，但是又不想升级，想留着偶尔方便自测和定位浏览器兼容问题，那我推荐你安装一个Chromium。这样你就可以一个电脑里面拥有两个 Chrome。_没有...
【复盘】我在 Vue3 开发中踩的坑
LuckyWinty的博客
10-29 443
点击上方前端Q，关注公众号回复加群，加入前端Q技术交流群大家好，我是winty！送一波新书「Vue.js3应用开发与核心源码解析」，送5本！送书规则见本文最后！送书规则见本文最后！送书规则见本文最后！前期准备由于 vite 在开发态是基于 ESM 进行模块化开发, 而 ESM 的浏览器兼容版本有限，如下图。esm-兼容所以，如果你打算使用 vite 作为构建工具去开发，你至少要有一个合适版本的浏...
vite打包优化
blue_121的博客
05-23 4651
但是还是有个700多kb的echarts插件和500多kb的element-puls....所以按需引入eleplus和选择合适的插件还是很重要的。再次 npm run build,文件就被拆开了，而不是所有引入的js都拼在一起。拆分后文件个数变成了206个，多了15个。再次打包生成后的js文件中，就几乎没有console.log以及debugger了。解决方式：添加如下代码，去除打包后的console.log。打开build之后的js文件，生成了相应的压缩文件。对比一下，没压缩之前的文件，确实小了很多。
vite5+vue3+ import.meta.glob动态导入vue组件
最新发布
03-25
vite5+vue3+ import.meta.glob动态导入vue组件
大坑？vite构建的vue项目不能直接使用require？
nuanua的博客
08-04 2578
大坑？vite构建的vue项目不能直接使用require？ vite npm
vite完整配置项
m0_60508458的博客
04-16 1786
【代码】vite完整配置项。
vue2旧项目迁移到vite开发，提升编译效率
逆水行舟，不进则退
09-20 1364
旧项目太庞大，每次开发都很费时间，保存预览一次需要3-4s的时间。已经升级用 webpack4的情况下，项目最早是 webpack3，编译一次，7-10s的时间，大大影响效率。想着再用vite升级一下开发效率。
迁移vite步骤及采坑记录
青梅煮酒论英雄的博客
02-28 1919
背景分析 本次的目的不是直接用 vite 替换 vue-cli ，而是想同时保留 vite 和 vue-cli 。除去影响开发体验 webpack 和 vite 本质上都是入口文件 + 依赖分析 + 模块转换。vite 是 使用的时候进行处理（vite针 对第三方库有同样会进行预处理）， webpack 则是先全部处理完毕。当浏览器天然支持 ES module 之 后，实时处理变得可能。这也是 vite 启动速度快的原因。 步骤 1. 分析vue.config.js，安装相关依赖 yarn add vite
Vue2.7.14、vue[email protected] 升级 [email protected]
chenacxz的博客
08-18 1670
Vue2.7.14、vue[email protected]、[email protected]、node14.18.3 升到vite4.4.8
实验记错本---我如何配置vue3-json-editor
qq_43474780的博客
02-13 1077
stop
vue3项目打包错误
热门推荐
qq_24986271的博客
08-22 1万+
这个错误似乎是 plugin-legacy 2.0需要 vite 3.0才行。（1）在安装包的时候忽略冲突，安装命令后面加。（2）更新所有的包到，最新，再来解决冲突。第一个报错js，右键点进去，搜索。但是我是这样的也报错。
vite3 + vue3 + ts设置跨域
01-11
在vite3 + vue3 + ts项目中设置跨域可以通过配置vite.config.js文件来实现。具体步骤如下： 1. 在项目根目录下创建一个vite.config.js文件。 2. 在vite.config.js文件中添加以下代码： ```javascript import { defineConfig } from 'vite'; export default defineConfig({ server: { proxy: { '/api': { target: 'http://example.com', // 设置你要请求的接口域名 changeOrigin: true, rewrite: (path) => path.replace(/^\/api/, '') // 去掉请求路径中的/api前缀 } } } }); ``` 3. 将target的值修改为你要请求的接口域名。 4. 重启项目，跨域设置就生效了。 需要注意的是，以上代码中的`/api`是一个示例，你可以根据实际情况修改为你的接口路径前缀。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值