vue3.0+vite+ts build打包报错问题汇总

最新推荐文章于 2025-04-23 14:23:44 发布
最新推荐文章于 2025-04-23 14:23:44 发布
阅读量7.5k 收藏 32
点赞数 19
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Cocoon_Xu/article/details/136373483
版权
本文主要介绍了在开发过程中遇到的四种打包错误，包括`allowJs`选项的启用、类型检查问题、模块引用问题以及Jenkins流水线打包时的路径问题。提供了解决方案，帮助开发者快速定位并修复这些问题。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

一、打包报错问题：Did you mean to enable "allowJs" option?

解决方法：tsconfig.json文件中，“compilerOptions”配置"allowJs": true

||===================================================================||

二、打包报错问题：Property ‘ ‘ does not exist on type ‘never‘

解决方法：将 package.json 文件中的 "build": "vue-tsc --noEmit && vite build"，改为 ： "build": "vite build",

||===================================================================||

三、打包报错问题：Cannot find module '@/router' or its corresponding type declarations.

解决方法：tsconfig.json文件中compilerOptions中加入以下配置解决

||===================================================================||

四、打包报错问题：Could not load /data/workspace/src/components/menuTree/index.vue

解决方法：使用jenkins流水线打包时，import文件路径严格区分大小写

有帮助就点个赞吧~

Cocoon_Xu
关注
Vue3 - Vite 使用 vite-plugin-require-transform 插件运行或打包时出现报错，vue3 + vite 项目执行 build 打包时出现各种问题错误（保证完美解决）
王二红
01-01 7105
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 - Vite运行打包时Uncaught ReferenceError: process is not defined（解决vue3+vite报错process is not defined）
王二红
03-26 6539
vue3，vite，vue3+vite报错，process，UncaughtReferenceError:processisnotdefined，浏览器控制台报错processisnotdefined解决方法，vue3如何解决报错，vite报错怎么办，前端打包UncaughtReferenceError:processisnotdefined，npmrunbuild打包报错，vite打包时出现错误，vue3打包运行找不到process，热更新会报错UncaughtRefer
解决vite+vue3+ts项目中@路径报错的问题
最新发布
qq_44723219的博客
04-23 456
新的vite+ts项目@路径报错解决
vue3 vite安装依赖过程中 esbuild 报错问题，tmd 解决了一天。
m0_67887734的博客
09-05 1848
这个WebAssembly版本，使用WebAssembly版本可以在某些特定环境（如Web浏览器或某些特定的服务器环境）中获得更好的兼容性。1.删除node_modules 依赖文件。
vite build构建后启动项目报错：“Cannot access ‘o‘ before initialization“
m0_55847695的博客
04-22 573
开发模式下，代码以接近原始状态运行，模块按需加载并保持独立，循环引用问题被浏览器的模块加载机制和Vite的开发服务器处理。生产构建则会进行深度优化，重组代码结构，这个过程会打破原本正常工作的循环引用解决方案，导致TDZ问题暴露出来。这就是为什么解决方案主要集中在禁用那些会改变变量初始化顺序的构建优化选项，让生产构建的行为更接近开发环境的原始代码结构。
vue3使用Vite打包是Ts检查报错问题
MingT 明天你好！的博客
08-02 2913
'calendarSwitch' is declared but its value is never read error TS： Cannot find module 'element-plus/es/locale/index.js' or its corresponding type declarations. ; }' is not assignable to parameter of type 'never'.
Vue3+vite打包发版项目报错简记：Failed to load module script
热门推荐
kevin_gwc的博客
08-24 3万+
Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec
vue3 vite打包报错 node_api_throw_syntax_error+175743
weixin_47092531的博客
02-29 822
1.安装插件 npm install -g increase-memory-limit。修改 package.json文件下scripts中的build。2.在项目目录执行increase-memory-limit。解决方案二（建议使用）
vue 3.0 + vite项目gzip打包优化
m0_67266585的博客
03-03 1556
最近自己构建了一个 vite 2.0 + vue 3.2.* 的开源项目，记录一下本次项目进行本地代码打包压缩的优化 手摸手开始优化 什么是gzip 为什么要去优化 如何优化 1. 前端代码配置 代码压缩 服务器配置 ``Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of “text/html”. St
Vue3.0+typescript+Vite+Pinia+Element-plus搭建vue3框架！
qq_33546296的博客
06-03 1534
/ 此处的id很重要name: ''}),getters: {},},actions: {},// 登录// 调用接口，做逻辑处理})setup() {// $patch 修改 store 中的数据name: '名称被修改了,nameLength也改变了'})return {userStore,updateName},})
vue3 + vite5 + typescript + element-plus 构建的后台管理前端模板的 vue3 版本
04-02
通过阅读 "说明.txt" 文件，可以获得关于如何安装和运行项目的指导，例如使用 `npm install` 安装依赖，然后运行 `vite dev` 或 `vite build` 进行开发或生产环境的构建。 综上所述，这个项目结合了 Vue3、Vite5、...
Vue3.0+vite vite.config.ts配置与env
qq_42396791的博客
03-15 2662
【代码】Vue3.0 vite.config.ts配置。
关于vue3.0 + vite + ts 打包的坑
qq_37656005的博客
08-20 1万+
关于vue3.0 + vite + ts 打包的坑 我的项目是用vue3.0.x+ vite2.4.x + ts 4.3.x版本开发的，引入一些elementui,axios,vuex等插件，用npm run build 打包的时候报了一大堆错，后来发现原来是vue-tsc --noEmit && vite build的问题 报错详情： package.json文件默认配置如下： "scripts": { "dev": "vite", "build": "vue-tsc -
vue3+vite项目打包遇到的问题
qq_48666244的博客
03-18 881
router/index.js，将路由模式改成hash模式。vite.config.js中，添加base: './'
记录一个困扰两天的bug,vue3代码用vite打包运行出错的问题
guiplan
08-13 761
由于开发环境是正常的，生产环境是坏的，所以无法定位代码哪里错误，只能用排除法，不断修改，打包，修改，打包。后来才发现上面的案例中gameStatus的一个父组件与子组件的通信，我只要改了gameStatus就报错，什么$refs undfined特别的无语。只能换一个方式来处理，这种游戏状态组件里直接用局部变量，myStatus来做判断，然后父组件直接修改子组件的myStatus。这种形式的写法就可以直接获取组件了。首先的第一个问题是proxy.$refs.组件名称，这种写法突然不支持了，其他页面支持。
在 Vue 3 + Vite + TypeScript 项目中，如果你在开发阶段运行没有问题，但在打包时遇到异常
weixin_47941995的博客
08-06 623
在 Vue 3 + Vite + TypeScript 项目中，如果你在开发阶段运行没有问题，但在打包时遇到异常，这通常是因为开发环境和生产环境之间存在一些差异，比如代码优化、打包插件的行为、环境变量等。通过这些方法，你可以在开发阶段就尽可能多地捕获和修复问题，从而减少打包时的异常和错误。
Vue3 - 打包报错：(!) Some chunks are larger than 500 KiB after minification. Consider（- Using dynamic im）
王二红
09-08 8827
vue3vite报错(!)Somechunksarelargerthan500KiBafterminification.Consider:-Usingdynamicimport()tocode-splittheapplication-Usebuild.rollupOptions.output.manualChunkstoimprovechunking:https://rollupjs.org/guide/en/#outputmanualchunksAdj
vue3+vite - 打包构建报错Top-level await is not available in the configured target environment (“chrome87“,
高级前端工程师
05-18 3863
vue3，vite，Top-level await，build，打包构建，报错，npm run build，vite-plugin-top-level-await，vue3+vite打包报错，vue3 vite项目build打包出错，无法打包，Top-level await is not available in the configured target environment ("chrome87", "edge88", "es2020", "firefox78", "safari13" + 2 ove
vue3+vite打包部署后页面报错Expected a JavaScript module script but the server responded with a MIME type of “
weixin_49032614的博客
03-20 3078
如果静态文件包含有前缀，要注意加上前缀，不然也会报错。
vue3.0+ts+vite 界面关闭的时候关闭signalR
07-12
在Vue 3.0 + TypeScript + Vite项目中，您可以使用`beforeUnmount`钩子函数来在界面关闭时关闭SignalR连接。 首先，确保您已经安装了`@microsoft/signalr`库并进行了相应的配置。然后，在Vue组件中，您可以按照以下步骤关闭SignalR连接： 1. 在组件的`setup`函数中导入SignalR库并设置连接对象： ```typescript import { onBeforeUnmount, ref, Ref } from &#39;vue&#39;; import { HubConnectionBuilder } from &#39;@microsoft/signalr&#39;; export default { setup() { const connection: Ref<HubConnection> = ref(null); // 创建SignalR连接 connection.value = new HubConnectionBuilder() .withUrl(&#39;/hubUrl&#39;) // 替换为您的SignalR Hub URL .build(); // 监听连接关闭事件 onBeforeUnmount(() => { // 关闭SignalR连接 connection.value.stop(); }); return { connection, }; }, }; ``` 2. 在`onBeforeUnmount`钩子函数中，调用SignalR连接对象的`stop()`方法来关闭连接。 这样，当组件所在的界面关闭时，SignalR连接将会被正确关闭。 请注意，以上示例假设您已经进行了SignalR的配置，并且在Vue组件中正确导入了相关的库。确保替换示例代码中的`/hubUrl`为您实际的SignalR Hub URL。 希望对您有所帮助！如果您有任何其他问题，请随时提问。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值